Html 如何在水平行中显示 <ul>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/885691/
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
How to make a <ul> display in a horizontal row
提问by Babiker
How can I make my list items appear horizontally in a row using CSS?
如何使用 CSS 使我的列表项水平显示在一行中？
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers {
display: inline;
}<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>回答by hbw
List items are normally block elements. Turn them into inline elements via the displayproperty.
列表项通常是块元素。通过display属性将它们变成内联元素。
In the code you gave, you need to use a context selector to make the display: inlineproperty apply to the list items, instead of the list itself (applying display: inlineto the overall list will have no effect):
在您提供的代码中，您需要使用上下文选择器使display: inline属性应用于列表项，而不是列表本身（应用于display: inline整个列表将没有效果）：
#ul_top_hypers li {
display: inline;
}
Here is the working example:
这是工作示例：
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers li{
display: inline;
}<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>回答by alex
You could also set them to float to the right.
您也可以将它们设置为向右浮动。
#ul_top_hypers li {
float: right;
}
This allows them to still be block level, but will appear on the same line.
这允许它们仍然是块级的，但会出现在同一行上。
回答by Paul Morie
Set the displayproperty to inlinefor the list you want this to apply to. There's a good explanation of displaying lists on A List Apart.
将display属性设置inline为要应用到的列表。在A List Apart上显示列表有一个很好的解释。
回答by tjhorner
As @alex said, you couldfloat it right, but if you wanted to keep the markup the same, float it to the left!
正如@alex 所说，您可以将其向右浮动，但如果您想保持标记不变，请将其向左浮动！
#ul_top_hypers li {
float: left;
}
回答by vikram mohod
It will work for you:
它会为你工作：
#ul_top_hypers li {
display: inline-block;
}
回答by Matthew Johnson
As others have mentioned, you can set the lito display:inline;, or floatthe lileft or right. Additionally, you can also use display:flex;on the ul. In the snippet below I also added justify-content:space-aroundto give it more spacing.
正如其他人所说，你可以设置li到display:inline;，或float在li左或右。此外，您还可以display:flex;在ul. 在下面的代码段中，我还添加justify-content:space-around了更多间距。
For more information on flexbox, checkout this complete guide.
有关 flexbox 的更多信息，请查看此完整指南。
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers {
display: flex;
justify-content:space-around;
list-style-type:none;
}<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>回答by Kumar Saket
#ul_top_hypers li {
display: flex;
}
