javascript - CSS 不会对齐

Question

我想在标题部分设置列表，但每次我这样做时，我的主页、关于和博客都没有背景颜色或背景颜色最小化。我不知道你能在多大程度上理解我想说的话，如果你愿意，我可以把图片放在我想要列表的地方。

header {
  background: #304852;
  color: #ffffff;
  border-bottom: #585858 3px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 40px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header nav {
  float: right;
}

<header>
  <div id="logo">

    <img src="http://lorempixel.com/120/60/" width="120px" height="60px">
  </div>
  <nav>
    <ul>

      <li><a href="C:\Users\Mihajlo\Desktop\retardirani mihajlo\Web about">HOME</a></li>
      <li><a href="C:\Users\Mihajlo\Desktop\retardirani mihajlo\Web about">ABOUT</a></li>
      <li> <a href="C:\Users\Mihajlo\Desktop\retardirani mihajlo\Web about">BLOG</a></li>
      <li><a href="C:\Users\Mihajlo\Desktop\retardirani mihajlo\Web about">CONTACT</a></li>
    </ul>
  </nav>
</header>

Answer 1

最好的做法是从 header li 和 header nav CSS 选择器中删除 float，而是应用一个简单的text-align 到 header nav。

引用附件代码。

header{
  background: #304852;
  color: #ffffff;
  border-bottom: #585858 3px solid;
}
header a{
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 40px;
}
header ul{
  margin: 0;
  padding: 0;
}
header li{
  /* float: left; */
  display: inline-block;
  padding: 0 20px 0 20px;
}

header nav{
  /* float: right; */
  text-align: right;
}

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </nav>
</header>