Question

我有以下HTML代码和一些内部CSS：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111111;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

以上代码显示水平菜单。

据我所知，除非我们使用display: inline属性，否则我们无法水平显示列表。那么在上面的代码中，如果没有使用display: inline属性并且列表仍然是水平显示的话怎么会发生呢？

有人请解释我。

感谢。

Answer 1

据我所知，除非我们使用display: inline属性，否则我们无法水平显示列表。那么在上面的代码中，如果没有使用display: inline属性并且列表仍然是水平显示的话怎么会发生呢？

实际上，有几种方法可以在同一行上显示元素。这里只是几个：

display: inline
display: inline-block
display: flex（在父母身上）
创建未指定display的自定义元素

，和你的代码一样：

float: left

来自MDN：

float CSS属性指定应该采用一个元素从正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。

另外，the initial value of the display property is inline。

这意味着默认情况下所有元素都是display: inline。（因此，为什么自定义元素出现在上面的列表中。）

直到浏览器解析其default style sheet时某些元素变为display: block并在不同的行上呈现。

以下是更深入的解释：Proper way to apply CSS to HTML5 custom elements

Answer 2

从css中删除float: left，因为它也会内联列表。见下文

li {
  float: left;
}

为什么这个无序列表呈现为内联？

2 个答案: