HTML CSS 位置 div 左中右

Question

我有导航栏： nav 我读了很多有关定位 3 个 div 元素的左中中心的文章，我喜欢这种方式，但它有点不完美，我不知道为什么：    <div class="topnav">             <div class="topnav-left">                 <a href="/">Home</a>             </div>             <div class="topnav-center">                 <a href="/about-me">Logo</a>             </div>             <div class="topnav-right">                 <a href="/login">Login</a>             </div>     </div>样式.css.topnav{    text-align: center;}.topnav-left{    float:left;}.topnav-right{    float:right;}.topnav-center{    display: inline-block;}问题是，当我重定向到仅包含主页和徽标的同一页面（因此没有右侧部分）时，徽标会向右移动一点，就像它依赖于右侧部分的存在一样。有人可以解释一下为什么吗？

Answer 1

您可以使用 CSS flexbox 轻松解决这个问题。

将此 CSS 添加到.topnav：

      display: flex;

      flex-flow: row wrap;

      justify-content: space-between;

它在做什么？它确保容器的子级（在本例中为内部的三个 div）之间的剩余空间均匀分布。

一个小旁注，用于float定位元素不再被认为是最佳实践。

.topnav {

  display: flex;

  flex-flow: row wrap;

  justify-content: space-between;

  

  /* Styling */

  background: #eee;

  color: #fff;

  padding: 5px 0;

}

/* Styling */

body {

  margin: 0;

  padding: 0;

}

<div class="topnav">

  <div class="topnav-left">

    <a href="/">Home</a>

  </div>

  <div class="topnav-center">

    <a href="/about-me">Logo</a>

  </div>

  <div class="topnav-right">

    <a href="/login">Login</a>

  </div>

</div>

使用左侧和中心元素编辑解决 方案，只需将div右侧部分留空即可。请参阅下面的代码片段了解结果。

.topnav {

  display: flex;

  flex-flow: row wrap;

  /* Styling */

  background: #eee;

  color: #fff;

  padding: 5px 0;

}

.topnav-left,

.topnav-right {

  flex: 1;

}

/* Styling */

body {

  margin: 0;

  padding: 0;

}

<div class="topnav">

  <div class="topnav-left">

    <a href="/">Home</a>

  </div>

  <div class="topnav-center">

    <a href="/about-me">Logo</a>

  </div>

  <div class="topnav-right">

  </div>

</div>