Question

Baically - 我是HTML / CSS的新手，我想把这个导航栏集中在一起：

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
}

li a {
  display: block;
  text-decoration: none;
  padding: 15px 15px;
  background-color: rgb(4, 210, 129);
  font-weight: 800;
  font-family: "Monospace", Lucida Console;
  color: white;
}

li a:hover {
  background-color: rgb(109, 245, 208);
}

li img {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
}

div {}

.current {
  background-color: rgb(109, 245, 208);
}

.end {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
  padding: 23px;
  box-sizing: border-box;
  width: 40%
}

＆＃13;

<header>
  <nav>
    <div>
      <ul>
        <li><img src="IMG/logo.png" class="logo" /></li>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Contact</a></li>
        <!-- <li class="end"></li> -->
      </ul>
    </div>
  </nav>
</header>

＆＃13;

我想知道的是，为什么我无法通过使用div元素或通过分配类或ID来控制导航栏？

我能控制它的唯一方法是使用li a，li img等。

这是为什么？有没有更好的方法呢？感谢。

Answer 1

我认为问题是您在float: left项目上使用了li。引用mozilla web docs;

float CSS属性指定元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素将从网页的正常流程中删除，但仍然是流程[...]
的一部分

因为它已从流中转出，所以text-align: center不会影响li个对象。

不要使用float: left，而是在display: inline-block和li上尝试使用a来达到预期的效果。这会在块之间留下一个空格（实际上只是缩进文件中的所有空格），但可以通过在包含元素（font-size: 0）中设置ul来修复;你只需要在实际存在文本的对象中设置适当大小的字体大小。完成后，您可以将text-align: center应用于ul元素以使对象居中。

这是一个演示。要查看结果，请单击“运行代码段”按钮。（PS：正如Facundo所说，你不需要围绕div元素的ul。）

ul {
  list-style-type: none;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
}

li a {
  display: inline-block;
  text-decoration: none;
  padding: 15px 15px;
  background-color: rgb(4, 210, 129);
  font-weight: 800;
  font-size: 16px;
  font-family: "Monospace", Lucida Console;
  color: white;
}

li a:hover {
  background-color: rgb(109, 245, 208);
}

li img {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
}

div {}

.current {
  background-color: rgb(109, 245, 208);
}

.end {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
  padding: 23px;
  box-sizing: border-box;
  width: 40%
}

<!DOCTYPE html>
<html>

<head>
  <title>Lorem</title>
  <link rel="stylesheet" type="text/css" href="CSS/stylesheet.css" />
</head>
<header>

  <nav>
    <ul>
      <li><img src="IMG/logo.png" class="logo" /></li>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Store</a></li>
      <li><a href="#">Contact</a></li>
      <!-- <li class="end"></li> -->
    </ul>
  </nav>
</header>

<body>


</body>

</html>

如何在HTML / CSS中居中导航栏？

1 个答案: