html - css list inline 不是水平列出元素吗？

<分区>

不知道为什么这个显示不对，列表是用来横向显示的？相反，它是垂直显示的!

这是我的代码:

#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>

最佳答案

那是因为 h1 元素默认是 block 级元素。

添加:

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>

但这可能只是我自己 =)

这里有一篇文章支持我的观点:

关于html - css list inline 不是水平列出元素吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3790202/

相关文章：

CSS 居中标题在 li 中