Html css list inline 不是水平列出项目吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3790202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css list inline is not listing items horizontally?
提问by getaway
I don't know why this is not displayed right, the list is meant to display horizontally? Instead it is displaying vertically!
我不知道为什么这个显示不正确，列表是水平显示的？相反，它是垂直显示的！
this is my code:
这是我的代码：
#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>回答by David says reinstate Monica
That's because the h1element is block-level element by default.
那是因为该h1元素默认是块级元素。
Add:
添加：
h1 {display: inline; }
to your css and they work as you want.
到您的 css，它们可以按您的意愿工作。
On a separate note, it's worth noting that there should be only one h1per page, all other headings, semantically, are below that heading and are sub-headings, of a sort. Think of it as a book, the book-title would be the h1, the chapters the h2and so on.
另外，值得注意的是h1每页应该只有一个，所有其他标题在语义上都在该标题下方，并且是某种子标题。把它想象成一本书，书名是h1，章节h2等等。
I'd suggest, then, changing your html a little:
我建议，然后，稍微改变你的 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>
But that might, possibly, be just me =)
但这可能只是我=）
Here's an article to support my point of view:
这里有一篇文章来支持我的观点：
回答by Ventus
You forgot to add float: leftproperty to your CSS:
您忘记向float: leftCSS添加属性：
#stats li
{
display: inline;
list-style-type: none;
padding-right: 20px;
float: left;
}
By the way, you are missing opening atag in your HTML example. Should be
顺便说一句，您a在 HTML 示例中缺少开始标记。应该
<li><a href="#"><h1>53</h1></a></li>
回答by Jeff Rupert
h1tags default as display:block;so that is taking precedence.
h1标签默认，display:block;因此优先。
Also, you have </a>tags after closing the <h1>tags, but there are no opening tags. That could cause issues in older browsers.
此外，</a>关闭标签后有<h1>标签，但没有开始标签。这可能会导致旧浏览器出现问题。
Third, what's the purpose of putting h1tags inside of lis? Semantically, that doesn't make sense.
三、h1在lis里面放标签的目的是什么？从语义上讲，这没有意义。
回答by sternAndy
There are multiple solutions: you could change li to display: inline-block; or h1 to display:inline; (keep in mind to use only one h1 per site and to use it semantically correct! If you just want to style a word or a sentence which isn't really a h2 or 3 then use span's, em's or strong's.
有多种解决方案：您可以将 li 更改为 display: inline-block; 或 h1 显示：内联；（请记住，每个站点只使用一个 h1 并在语义上正确使用它！如果您只想设置一个不是真正 h2 或 3 的单词或句子的样式，请使用 span、em 或 strong。
Also it's important that an inline-a-Tag can't enclose a block-whatever-Tag that is if you're not developing for HTML5 where you can enclose just anything in an a-Tag.
同样重要的是，inline-a-Tag 不能包含 block-whatever-Tag，如果您不是为 HTML5 开发，您可以在 a-Tag 中包含任何内容。
Also if you can, omit floating for a thing that can be achieved with more backwards compatibilty
此外，如果可以，请省略浮动，因为可以通过更多向后兼容性来实现
回答by B T
Using display: inline-blockas sternAndy suggests is probably the right solution here. Inline isn't really useful for anything but elements that have no nested elements inside them.
display: inline-block按照 sternAndy 的建议使用可能是这里的正确解决方案。除了内部没有嵌套元素的元素外，内联并没有真正有用。
