html - 3 列行中的左侧导航列表不适用于内联 block

Question

我有一排 3 个元素，出于某种原因，我无法让左侧导航列表与内联 block 一起使用。它适用于第二个，我以前遇到过这个问题，但不记得这个问题背后的确切原因，因为那是我第一次开始学习构建网站的时候。

#nav {
    display: block;
    clear: both;
    width: 100%;
    min-width: 1200px;
    height: 50px;
    margin-right: auto;
    margin-left: auto;
}
#nav_left {
    display: block;
    float: left;
    margin-left: auto;
    margin-right: auto;
    width: 36.5%;
    height: 40px;
    text-align: left;
}
#nav_left ul {
    font-size: 19px;
    letter-spacing: 1px;
    list-style-type:none;
}
#nav_nav li {
    width: 15%;
    display: inline-block;
}
#nav_left li a {
    text-decoration: none;
}
#center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    width: 24%;
    height: 40px;
    text-align: center;
}
#nav_right {
    display: block;
    float: right;
    margin-top: -44px;
    margin-left: auto;
    margin-right: auto;
    width: 36.5%;
    height: 40px;
    text-align: left;
}
#nav_right ul {
    font-size: 19px;
    letter-spacing: 1px;
    list-style-type:none;
}
#nav_right li {
    width: 15%;
    display: inline-block;
}
#nav_right li a {
    text-decoration: none;
}

<section id="nav">
    <div id="nav_left">
        <ul>
            <li><a href="">item</a>
            </li>
            <li><a href="">item</a>
            </li>
            <li><a href="">item</a>
            </li>
        </ul>
    </div>
    <div id="center">
        <p>words here</p>
    </div>
    <div id="nav_right">
        <ul>
            <li><a href="">item</a>
            </li>
            <li><a href="">item</a>
            </li>
            <li><a href="">item</a>
            </li>
        </ul>
    </div>
</section>

感谢您提供的任何帮助，谢谢。

Answer 1

原因是你在 #nav_left 上打错了

您有:

#nav_nav li {
    width: 15%;
    display: inline-block;
}

将其更改为:

#nav_left li {
    width: 15%;
    display: inline-block;
}

下面的片段演示:

#nav {
  display: block;
  clear: both;
  width: 100%;
  min-width: 1200px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;
}
#nav_left {
  display: block;
  float: left;
  margin-left: auto;
  margin-right: auto;
  width: 36.5%;
  height: 40px;
  text-align: left;
}
#nav_left ul {
  font-size: 19px;
  letter-spacing: 1px;
  list-style-type: none;
}
#nav_left li {
  width: 15%;
  display: inline-block;
}
#nav_left li a {
  text-decoration: none;
}
#center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 1px;
  width: 24%;
  height: 40px;
  text-align: center;
}
#nav_right {
  display: block;
  float: right;
  margin-top: -44px;
  margin-left: auto;
  margin-right: auto;
  width: 36.5%;
  height: 40px;
  text-align: left;
}
#nav_right ul {
  font-size: 19px;
  letter-spacing: 1px;
  list-style-type: none;
}
#nav_right li {
  width: 15%;
  display: inline-block;
}
#nav_right li a {
  text-decoration: none;
}

<section id="nav">
  <div id="nav_left">
    <ul>
      <li><a href="">item</a>

      </li>
      <li><a href="">item</a>

      </li>
      <li><a href="">item</a>

      </li>
    </ul>
  </div>
  <div id="center">
    <p>words here</p>
  </div>
  <div id="nav_right">
    <ul>
      <li><a href="">item</a>

      </li>
      <li><a href="">item</a>

      </li>
      <li><a href="">item</a>

      </li>
    </ul>
  </div>
</section>