css list inline不是水平列出项目？

Question

我不知道为什么没有正确显示，列表是水平显示的？ 而是垂直显示！

这是我的代码：

#stats li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>

Answer 1

这是因为默认情况下h1元素是块级元素。

添加：

h1 {display: inline; }

到你的CSS，他们按你的意愿工作。

另外值得注意的是，值得注意的是每页只应该有一个h1，所有其他标题，在语义上都低于该标题，并且是一种类型的子标题。可以把它想象成一本书，书名是h1，章节是h2等等。

我建议，稍微改变你的HTML：

<ul id="stats">
    <li><a href="#"><span class="listHeader">53</span></a></li>
    <li><a href="#"><span class="listHeader">67</span></a></li>
</ul>

但那可能只是我=）

这是一篇支持我观点的文章：

• Grok Web-Standards

Answer 2

您忘记将float: left属性添加到CSS：

#stats li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

顺便说一句，您在HTML示例中缺少打开a标记。应该是

<li><a href="#"><h1>53</h1></a></li>

Answer 3

h1代码默认为display:block;，因此优先。

---

此外，关闭</a>代码后您有<h1>个代码，但没有开始标记。这可能会导致旧浏览器出现问题。

---

第三，将h1标记放在li中的目的是什么？从语义上讲，这没有意义。

Answer 4

有多种解决方案： 你可以改变li来显示：inline-block; 或h1显示：内联; （请记住，每个站点只使用一个h1并在语义上正确使用它！如果你只想设置一个不是真正的h2或3的单词或句子，那么请使用span，em或strong。

同样重要的是，内联标签不能包含一个块 - 无论是标签，如果你不是为HTML5开发，你可以在a-Tag中包含任何内容。

另外，如果可以的话，省略浮动以获得更具向后兼容性的东西

Answer 5

使用display: inline-block作为sternAndy建议可能是正确的解决方案。除了内部没有嵌套元素的元素之外，内联对任何东西都没有用。