如何使 html 中的 ul 横向排列:通过添加 float: left 样式使列表项浮动到左侧。为每个列表项设置宽度以控制其水平排列。使用 margin 属性消除列表项之间的间隙。
如何使 HTML 中的 UL 横向排列
在 HTML 中,默认情况下,无序列表 (UL) 会纵向排列其项目。但是,可以通过使用 CSS 样式来实现横向排列。
步骤:
-
应用浮动:
添加 CSS 样式
float: left
以使列表项浮动到左侧。
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">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怎么横向排列的详细内容,更多请关注编程网其它相关文章!