HTML CSS位置div左中右

Question

我有导航栏：nav我读了很多关于放置3个div元素的左中中心的stackoverflow文章，我喜欢这种方式，但这有点不完美，我也不知道为什么：

     <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>

style.css

.topnav{
    text-align: center;}
.topnav-left{
    float:left;}
.topnav-right{
    float:right;}
.topnav-center{
    display: inline-block;}

问题是，当我仅使用Home和Logo重定向到同一页面（因此没有右侧部分）时，徽标向右移动一点，就像它依赖于右侧部分的存在一样。有人可以解释一下为什么吗？

Answer 1

您缺少括号。

.topnav {
    text-align: center;
 }
.topnav-left {
    float:left;
 }
.topnav-right {
    float:right;
}
.topnav-center {
    display: inline-block;
 }

Answer 2

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

添加此CSS：

      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

.topnav {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  background: #eee;
  color: #fff;
  padding: 5px 0;
}

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>