HTMLでulを横に配置する方法

HTML で UL を水平方向に揃える方法: float: left スタイルを追加して、リスト項目を左にフロートさせます。各リスト項目の幅を設定して、水平方向の配置を制御します。リスト項目間のギャップをなくすには、margin プロパティを使用します。

#HTML で UL を水平方向に配置する方法

HTML では、デフォルトで順序なしリスト (UL) ) は項目を垂直に配置します。ただし、CSS スタイルを使用すると水平方向の配置を実現できます。

ステップ:

1. フロートの適用:

   CSS スタイルの追加

   フロート: 左 リスト項目を左にフローティングします。

<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>

例:

<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 ピクセルになります。隙間はありません。

以上がHTMLでulを横に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。