How to arrange ul horizontally in html

How to make UL in HTML align horizontally: Make the list items float to the left by adding float: left style. Set the width for each list item to control its horizontal arrangement. Use the margin property to eliminate gaps between list items.

How to make the UL in HTML arrange horizontally

In HTML, by default, the unordered list ( UL) arranges its items vertically. However, horizontal alignment can be achieved by using CSS styles.

Steps:

1. Apply float:

   Add CSS stylefloat: left to float the list items to the left.

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

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

2. Set the width:

   Set the width for each list item to control their horizontal arrangement.

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

3. Eliminate gaps:

   Gaps may appear between list items. Use the margin property to eliminate these gaps.

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

Example:

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

After applying these styles, your unordered list will be arranged horizontally, with list items width 150 pixels, and There are no gaps.

The above is the detailed content of How to arrange ul horizontally in html. For more information, please follow other related articles on the PHP Chinese website!