我的CSS
ul{
overflow:hidden;
}
li{
display:inline-block;
}
我的HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
我希望将所有我的李项目排成一行,如果我这样做,一切正常,除了当3或4 li填充我身体的第一行时他们走第二行,我希望他们在1行和一切填充1行后将"隐藏"
例如 ::
//注意li不仅包含1个字母的句子
输出现在::
a b c d
e f g
期望的产量::
a b c d e f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'
这可以按你的意愿工作:
<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>
小智 5
使用显示：表
HTML：
<ul class="my-row">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
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;
}
}
}
对我来说很棒