Html 如何将我所有的 li 对齐在一条线上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2325926/
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 align all my li on one line?
提问by trrrrrrm
my CSS
我的 CSS
ul{
overflow:hidden;
}
li{
display:inline-block;
}
my HTML
我的 HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
i want to align all my li items in one line, if i did that everything works fine except that when 3 or 4 li's fills the first line on my body they go the the second line, i want them to be on 1 line and everything after the 1 line is filled will be "hidden"
我想将我所有的 li 项目对齐在一行中，如果我这样做了，一切正常，除了当 3 或 4 个 li 填充我身体的第一行时，它们会进入第二行，我希望它们在 1 行上，一切正常第 1 行填充后将被“隐藏”
FOR EXAMPLE ::
例如 ：：
// NOTE li holds sentences not just 1 letter
// 注意 li 包含的句子不仅仅是 1 个字母
OUTPUT NOW ::
现在输出::
a b c d
e f g
DESIRED OUTPUT ::
期望的输出 ::
a b c d e f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'
回答by Ray
Try putting white-space:nowrap;in your <ul>style
尝试穿上white-space:nowrap;你的<ul>风格
edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)
编辑：并使用“内联”而不是“内联块”，正如其他人指出的那样（我忘记了）
回答by cjk
This works as you wish:
这如您所愿：
<html>
<head>
<style type="text/css">
ul
{
overflow-x:hidden;
white-space:nowrap;
height: 1em;
width: 100%;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
</ul>
</body>
</html>
回答by naorz
Using Display: table
使用显示：表格
HTML:
HTML：
<ul class="my-row">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
CSS:
CSS：
ul.my-row {
display: table;
width: 100%;
text-align: center;
}
ul.my-row > li {
display: table-cell;
}
SCSS:
社会保障：
ul {
&.my-row {
display: table;
width: 100%;
text-align: center;
> li {
display: table-cell;
}
}
}
Work great for me
对我来说很棒
回答by naorz
Here is what you want. In this case you do not want the list items to be treated as blocks that can wrap.
这就是你想要的。在这种情况下，您不希望将列表项视为可以包装的块。
li{display:inline}
ul{overflow:hidden}
回答by Dzmitry Katsar
I'm would recommend it:
我会推荐它：
<style>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
ul.list {
list-style: none;
}
ul.list li {
display: inline-block;
}
</style>
<ul class="list clearfix">
<li>li-one</li>
<li>li-two</li>
<li>li-three</li>
<li>li-four</li>
</ul>
回答by Wolfack
Other than white-space:nowrap;also add the following CSS
除了white-space:nowrap;还添加以下CSS
ul li{
display: inline;
}
回答by ??? ?????
I think the NOBR tag might be overkill, and as you said, unreliable.
我认为 NOBR 标签可能有点矫枉过正，正如你所说，不可靠。
There are 2 options available depending on how you are displaying the text.
根据您显示文本的方式，有 2 个可用选项。
If you are displaying text in a table cell you would do Long Text Here. If you are using a div or a span, you can use the style="white-space: nowrap;"
如果您在表格单元格中显示文本，您可以在此处执行长文本。如果您使用的是 div 或 span，则可以使用 style="white-space: nowrap;"
