如何将我所有的 li 对齐在一条线上？
[英]how to align all my li on one line?
问题描述
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'
7 个解决方案
解决方案1
35 已采纳 2010-02-24 12:35:38
Try putting white-space:nowrap;尝试放置white-space:nowrap; in your <ul> style以你的<ul>风格
edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)编辑：并使用“内联”而不是“内联块”，正如其他人指出的那样（我忘记了）
解决方案2
16 2010-02-24 12:37:35
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>
解决方案3
8 2015-10-13 13:49:57
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对我来说很棒
解决方案4
3
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}
解决方案5
1 2016-08-29 10:33:28
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>
解决方案6
1 2018-04-27 07:25:26
Other than white-space:nowrap;除了white-space:nowrap; also add the following CSS还添加以下 CSS
ul li{
display: inline;
}
解决方案7
0 2012-02-14 08:15:10
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;"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.