Comment organiser ul horizontalement en HTML

Comment aligner UL en HTML horizontalement : faites flotter les éléments de la liste vers la gauche en ajoutant le style float: left. Définissez la largeur de chaque élément de la liste pour contrôler sa disposition horizontale. Utilisez la propriété margin pour éliminer les espaces entre les éléments de la liste.

Comment aligner UL horizontalement en HTML

En HTML, par défaut, une liste non ordonnée (UL) organise ses éléments verticalement. Cependant, l'alignement horizontal peut être obtenu en utilisant des styles CSS.

Étapes :

1. Appliquer float :

   Ajouter le style CSS float: left pour que les éléments de la liste flottent vers la gauche. float: left 以使列表项浮动到左侧。

<code class="css">ul {
  list-style-type: none; /* 删除默认圆点 */
  padding: 0; /* 删除默认间距 */
}

li {
  float: left; /* 使列表项浮动到左侧 */
}</code>

2. 设置宽度：

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

<code class="css">li {
  width: 150px; /* 设置列表项的宽度 */
}</code>

3. 消除间隙：

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

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

Copier après la connexion

Définir la largeur :

Définissez la largeur de chaque élément de la liste pour contrôler sa disposition horizontale.

🎜🎜

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>

Copier après la connexion
🎜🎜🎜 Éliminez les écarts : 🎜🎜🎜 Des écarts peuvent apparaître entre les éléments de la liste. Utilisez l'attribut margin pour éliminer ces écarts. 🎜🎜🎜

<code class="css">ul {
  list-style-type: none;
  padding: 0;
}

li {
  float: left;
  width: 150px;
  margin-right: -1px;
}</code>

Copier après la connexion
🎜🎜Exemple : 🎜🎜rrreeerrreee🎜Après avoir appliqué ces styles, votre liste non ordonnée s'alignera horizontalement avec des éléments de liste de 150 pixels de large et sans espaces. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!