Question

我的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>

我希望将所有我的li项目排成一行，如果我这样做，一切正常，只有当3或4 li填充我身体的第一行时，他们会去第二行，我希望他们在1线和1线之后的所有内容都将被“隐藏”

FOR EXAMPLE ::

//注意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'

Answer 1

尝试将white-space:nowrap;放入<ul>样式

编辑：并使用'inline'而不是'inline-block'，正如其他人指出的那样（我忘了）

Answer 2

这可以按照您的意愿运作：

<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>

Answer 3

使用Display：table

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;
    }
  } 
}

为我工作

Answer 4

这是你想要的。在这种情况下，您不希望将列表项视为可以换行的块。

li{display:inline}
ul{overflow:hidden}

Answer 5

我会推荐它：

<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>

Answer 6

我认为NOBR标签可能有点过分，正如你所说，不可靠。

根据您显示文字的方式，有两种选择。

如果要在表格单元格中显示文本，则可以在此处执行长文本。如果您使用div或span，则可以使用style =“white-space：nowrap;”

Answer 7

除了{{1}}之外，还添加以下CSS

{{1}}

如何在一条线上对齐我的李？

7 个答案: