html - 如何将我所有的 li 对齐在一条线上？

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 填充我 body 的第一行时，它们进入第二行，我希望它们在 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'

Answer 1

尝试输入 white-space:nowrap;在你的<ul>风格

编辑:并使用“inline”而不是其他人指出的“inline-block”(我忘记了)