So ordnen Sie UL in HTML horizontal an

下次还敢
Freigeben: 2024-04-27 19:58:09
Original
799 Leute haben es durchsucht

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 ordnen Sie UL in HTML horizontal an

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:

  1. 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>
Nach dem Login kopieren
  1. 设置宽度:

    为每个列表项设置宽度以控制它们水平排列。

<code class="css">li {
  width: 150px; /* 设置列表项的宽度 */
}</code>
Nach dem Login kopieren
  1. 消除间隙:

    列表项之间可能会出现间隙。使用 margin

  2. <code class="css">li {
      margin-right: -1px; /* 消除水平间隙 */
    }</code>
    Nach dem Login kopieren

      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>
      Nach dem Login kopieren
        🎜🎜🎜 Lücken beseitigen: 🎜🎜🎜 Zwischen Listenelementen können Lücken auftreten. Verwenden Sie das Attribut 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>
        Nach dem Login kopieren
        🎜🎜Beispiel: 🎜🎜rrreeerrreee🎜Nachdem Sie diese Stile angewendet haben, wird Ihre ungeordnete Liste horizontal mit Listenelementen mit einer Breite von 150 Pixeln und ohne Lücken ausgerichtet. 🎜

    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!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!