html中ul怎么横向排列

百变鹏仔 4周前 (09-21) #HTML

文章标签横向

如何使 html 中的 ul 横向排列：通过添加 float: left 样式使列表项浮动到左侧。为每个列表项设置宽度以控制其水平排列。使用 margin 属性消除列表项之间的间隙。

如何使 HTML 中的 UL 横向排列

在 HTML 中，默认情况下，无序列表 (UL) 会纵向排列其项目。但是，可以通过使用 CSS 样式来实现横向排列。

步骤：

ul {  list-style-type: none; /* 删除默认圆点 */  padding: 0; /* 删除默认间距 */}li {  float: left; /* 使列表项浮动到左侧 */}

li {  width: 150px; /* 设置列表项的宽度 */}

li {  margin-right: -1px; /* 消除水平间隙 */}

示例：

ul {  list-style-type: none;  padding: 0;}li {  float: left;  width: 150px;  margin-right: -1px;}

应用这些样式后，你的无序列表将横向排列，列表项宽度为 150 像素，并且没有间隙。

文章推荐