Question

<!DOCTYPE html>

<html>

<head>
  <title>Navigation Bar</title>
  <style type="text/css">
    #navbar>ul>li {
      display: inline-block;
    }
  </style>


</head>

<body>
  <h1>Navigation Bar</h1>
  <div id="navbar">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">google</a>
          </li>
          <li><a href="#">facebook</a>
          </li>
          <li><a href="#">linkidin sharma</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">google</a>
          </li>
          <li><a href="#">facebook</a>
          </li>
          <li><a href="#">linkidin sharma</a>
          </li>
          <li><a href="#">github</a>
          </li>
        </ul>
      </li>
      <li><a href="#">About Us</a>
        <ul>
          <li><a href="#">linkidin sharma</a>
          </li>
          <li><a href="#">github</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Career
				<ul>
					<li><a href="#">google</a>
      </li>
      <li><a href="#">facebook</a>
      </li>
      <li><a href="#">linkidin sharma</a>
      </li>
      <li><a href="#">github</a>
      </li>
      <li><a href="#">bhagalpur</a>
      </li>
    </ul>
    </li>
    </ul>
  </div>
</body>

</html>

我是如何将列表项并排制作的，因为它们上下呈现而不是并排？我在它们上面应用了内联块属性，请有人解释为什么即使这样也发生了？

Answer 1

如果你想要的是在同一行上对齐顶部项目，请添加

vertical-align:top;

风格。问题是您的顶级列表项的高度不同，baseline的默认垂直对齐会导致它们与底部对齐！

#navbar>ul>li {
  display: inline-block;
  vertical-align: top;
}

 <h1>Navigation Bar</h1>
<div id="navbar">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Contact</a>
      <ul>
        <li><a href="#">google</a>
        </li>
        <li><a href="#">facebook</a>
        </li>
        <li><a href="#">linkidin sharma</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">google</a>
        </li>
        <li><a href="#">facebook</a>
        </li>
        <li><a href="#">linkidin sharma</a>
        </li>
        <li><a href="#">github</a>
        </li>
      </ul>
    </li>
    <li><a href="#">About Us</a>
      <ul>
        <li><a href="#">linkidin sharma</a>
        </li>
        <li><a href="#">github</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Career</a>
      <ul>
        <li><a href="#">google</a>
        </li>
        <li><a href="#">facebook</a>
        </li>
        <li><a href="#">linkidin sharma</a>
        </li>
        <li><a href="#">github</a>
        </li>
        <li><a href="#">bhagalpur</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

#navbar>ul>li {
  display: inline-block;
  vertical-align: top;
}

是否所有合适，取决于页面的宽度

Answer 3

申请CSS：

ul li {
    float: right;
}

或将每个li设置为使用属性样式=＆＃34; float：right;＆＃34;比如

<li style="float: right">

如何正确修复导航栏？

3 个答案: