HTML

Question

使用下面的设置，css将完美地为我生成一个水平菜单栏。无论如何，我怀疑，根据第三组样式表，即使它的属性已被设置为块（锚标记）。为什么它不是真的像块一样？

因为我从大多数css教程中了解到一个块应该在元素之前和之后有换行符。但在这种情况下，为什么他们（所有锚点）在同一行中一个接一个地放置。我很好奇，想要明白。

任何解释都将非常感谢！

ul {
    list-style-type: none;
    height: 28px;
    width: 100%;
    margin: auto;
} 

li {
    float: left;
}

ul a {

    background-repeat: no-repeat;
    background-position: right;
    padding-right: 10px;
    padding-left: 10px;
    display: block; 
    line-height: 28px;
    text-decoration: none;
    color: #FFFFFF;
}

HTML

<div id="menuBar">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>                     
  </ul>
</div>

Answer 1

您有<li>设置为向左浮动。我想你的锚标签在你的li标签内。删除此规则：

li {
    float: left;
}

你的<a>应该是块级别的。通过将<li>设置为向左浮动，您告诉浏览器将块元素设置为相互堆叠而不是彼此堆叠。

Answer 2

好吧，他们出现在一条线上的原因确实是因为你将每个<li>元素向左浮动。您的<a>代码是阻止形式，但仅限于每个<li>个元素。因此，如果您在同一个<a>标记内放置多个<li>标记，它们会将一个标记叠加在另一个标记之上。但块元素的宽度仅为可用宽度的100％。所以在这种情况下，这就是<li>标签的宽度，这就是为什么其他元素不会被推到它下面的原因。

修改

一个更好的例子：

您告诉您的<ul>标记您不希望列表项显示为CSS中的普通列表项。然后，您告诉您的<li>元素他们将向左浮动。而且由于你没有清除它们，它们只是在一个堆叠中相互浮动，直到它们占据它们所处的整个宽度。

所以，假设它们只是在你的页面正文中，并且正文的宽度为800px，每个<li>占用200px。在它们下拉一行之前，你会连续有4个<li>个元素。

现在，在这种情况下，你的“Home”和“About”链接每个占用200px，因为它们是占用100％可用空间的块元素，即200px（因为它们包含在{{ 1}}标签）。它们在它们所包含的元素的顶部垂直对齐（默认情况下），因此看起来好像它们显示为内联。

但他们不是。只是他们的宽度被限制在可用的200px。如果您将两个链接放在同一个<li>元素中，您会看到它们堆叠在一起，因为每个链接将占用<li>元素的可用宽度的100％。

如果<li>标签未包含在<a>元素中，而是直接放在正文中，则它们的宽度各为800px，因为它是可用宽度的100％，并且它们会叠加一个在另一个之上。

阻止属性设置为非块元素

HTML

2 个答案: