HTML で UL を水平方向に揃える方法: float: left スタイルを追加して、リスト項目を左にフロートさせます。各リスト項目の幅を設定して、水平方向の配置を制御します。リスト項目間のギャップをなくすには、margin プロパティを使用します。
#HTML で UL を水平方向に配置する方法
HTML では、デフォルトで順序なしリスト (UL) ) は項目を垂直に配置します。ただし、CSS スタイルを使用すると水平方向の配置を実現できます。ステップ:
フロートの適用:
CSS スタイルの追加フロート: 左 リスト項目を左にフローティングします。
<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>
例:
<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>
以上がHTMLでulを横に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。