CSS无法对齐<li>

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

最佳做法是从您的float和header li CSS选择器中移除header nav，然后将简单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>

Answer 2

需要进行两项更改：

1。{} 101 float: left;，因为其他方面它是一个块元素并占据整个宽度。

2。）#logo overflow: auto，因为它只包含浮动元素，不会保留背景颜色。

＆＃13;

＆＃13;

header

＆＃13;

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

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

#logo {
  float: left;
}

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

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

header nav {
  float: right;
}

＆＃13;

＆＃13;

＆＃13;