Question

这是我的代码：

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav ul li a {
  clear float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>1st Website</title>
  <head<body<link type="text/css" rel="stylesheet" href="ess.css" media="screen">
    <div> <a href="#main">Skip to main content</a> </div>
    <h1>Jeremiah Njuguna Web Portfolio</h1>
    <div>
      <nav>
        <ul>
          <li> <a href="Index1.html">Home</a> <a href="Education.html">Education</a> <a href="Family.html">Family</a> <a href="Hobbies.html">Hobbies</a> <a href="Likes.html">Likes</a> <a href="Dislikes.html">Dislikes</a> </li>
        </ul>
      </nav>
    </div>
    </body>

</html>

但它看起来不是水平的，而是显示垂直。

Answer 1

li是一个块元素;所以让它内联块并给它一个宽度，然后它可以浮动。

nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}
nav ul li a {clear float: right;}
nav ul li  a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}
nav ul li {display: inline-block;width: 100px;}

<!doctype html>
<html>
<head><title></title>
</head><body>

<nav>
<ul>
<li><a href="">elm1</a></li>
<li><a href="">elm1</a></li>


</ul>
</nav>

</body>
</html>

Answer 2

大多数用户代理将display: list-item应用于li元素。你必须在你的CSS中覆盖它。要使其内联，请尝试显示内联块或内联，或尝试使用左浮动显示块。

Answer 3

您还可以使用display:flex：

nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; display:flex}
nav ul li a {}
nav ul li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}

如何制作水平导航栏？

3 个答案: