如何使 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 像素,並且沒有間隙。
以上是htmlul怎麼橫向排列的詳細內容。更多資訊請關注PHP中文網其他相關文章!