So richten Sie UL in HTML horizontal aus: Sorgen Sie dafür, dass die Listenelemente nach links schweben, indem Sie den Stil „float: left“ hinzufügen. Legen Sie die Breite für jedes Listenelement fest, um dessen horizontale Anordnung zu steuern. Verwenden Sie die Eigenschaft „margin“, um Lücken zwischen Listenelementen zu schließen.
So richten Sie UL in HTML horizontal aus
In HTML werden die Elemente einer ungeordneten Liste (UL) standardmäßig vertikal angeordnet. Eine horizontale Ausrichtung kann jedoch durch die Verwendung von CSS-Stilen erreicht werden.
Schritte:
Float anwenden:
CSS-Stil float: left
hinzufügen, damit die Listenelemente nach links schweben. 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>
Breite festlegen:
Legen Sie die Breite für jedes Listenelement fest, um deren horizontale Anordnung zu steuern.
🎜🎜<code class="html"><ul> <li>项目 1</li> <li>项目 2</li> <li>项目 3</li> </ul></code>
margin
, um diese Lücken zu schließen. 🎜🎜🎜<code class="css">ul { list-style-type: none; padding: 0; } li { float: left; width: 150px; margin-right: -1px; }</code>
Das obige ist der detaillierte Inhalt vonSo ordnen Sie UL in HTML horizontal an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!