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

下次还敢
リリース: 2024-04-27 19:58:09
オリジナル
813 人が閲覧しました

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

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

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

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

ステップ:

  1. フロートの適用:

    CSS スタイルの追加

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

  2. <code class="css">ul {
      list-style-type: none; /* 删除默认圆点 */
      padding: 0; /* 删除默认间距 */
    }
    
    li {
      float: left; /* 使列表项浮动到左侧 */
    }</code>
    ログイン後にコピー
  1. 幅の設定:

    各リスト項目の幅を設定して、水平方向の配置を制御します。

  2. <code class="css">li {
      width: 150px; /* 设置列表项的宽度 */
    }</code>
    ログイン後にコピー
  1. ギャップの解消:

    リスト項目間にギャップが発生する場合があります。

    margin プロパティを使用して、これらのギャップを解消します。

  2. <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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート