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>