问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我的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 行填充后将被“隐藏”

例如 ：：

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

原文由 trrrrrrm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 468
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

编辑：并使用“内联”而不是其他人指出的“内联块”（我忘了）

原文由 Ray 发布，翻译遵循 CC BY-SA 2.5 许可协议

社区维基
1

这如您所愿：

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

原文由 cjk 发布，翻译遵循 CC BY-SA 2.5 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题