HTML에서 ul을 가로로 정렬하는 방법

HTML에서 UL을 수평으로 정렬하는 방법: float: left 스타일을 추가하여 목록 항목을 왼쪽으로 부동하게 만듭니다. 각 목록 항목의 너비를 설정하여 가로 정렬을 제어합니다. 목록 항목 사이의 간격을 없애려면 여백 속성을 사용하십시오.

HTML에서 UL을 가로로 정렬하는 방법

HTML에서는 기본적으로 순서가 지정되지 않은 목록(UL)이 항목을 세로로 정렬합니다. 그러나 CSS 스타일을 사용하면 가로 정렬이 가능합니다.

단계:

1. float 적용:

   CSS 스타일 float: left를 추가하여 목록 항목이 왼쪽에 뜨게 만듭니다. 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>

로그인 후 복사

너비 설정:

각 목록 항목의 너비를 설정하여 가로 배열을 제어합니다.

🎜🎜

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

로그인 후 복사
🎜🎜🎜 공백 제거: 🎜🎜🎜 목록 항목 사이에 공백이 나타날 수 있습니다. 이러한 공백을 제거하려면 margin 속성을 ​​사용하세요. 🎜🎜🎜

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

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

로그인 후 복사
🎜🎜예: 🎜🎜rrreeerrreee🎜이러한 스타일을 적용한 후 순서가 지정되지 않은 목록은 목록 항목 너비가 150픽셀이고 간격 없이 가로로 정렬됩니다. 🎜

위 내용은 HTML에서 ul을 가로로 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!