如何使 HTML 中的 UL 横向排列：通过添加 float: left 样式使列表项浮动到左侧。为每个列表项设置宽度以控制其水平排列。使用 margin 属性消除列表项之间的间隙。
如何使 HTML 中的 UL 横向排列
在 HTML 中，默认情况下，无序列表 (UL) 会纵向排列其项目。但是，可以通过使用 CSS 样式来实现横向排列。
步骤：
应用浮动：
立即学习“前端免费学习笔记（深入）”；
添加 CSS 样式 float: left 以使列表项浮动到左侧。
<code class="css">ul {
list-style-type: none; /* 删除默认圆点 */
padding: 0; /* 删除默认间距 */
}
li {
float: left; /* 使列表项浮动到左侧 */
}</code>设置宽度：
为每个列表项设置宽度以控制它们水平排列。
<code class="css">li {
width: 150px; /* 设置列表项的宽度 */
}</code>消除间隙：
列表项之间可能会出现间隙。使用 margin 属性消除这些间隙。
<code class="css">li {
margin-right: -1px; /* 消除水平间隙 */
}</code>示例：
<code class="html"><ul> <li>项目 1</li> <li>项目 2</li> <li>项目 3</li> </ul></code>
<code class="css">ul {
list-style-type: none;
padding: 0;
}
li {
float: left;
width: 150px;
margin-right: -1px;
}</code>应用这些样式后，你的无序列表将横向排列，列表项宽度为 150 像素，并且没有间隙。
以上就是html中ul怎么横向排列的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
604
收藏
