>웹 프론트엔드 >HTML 튜토리얼 >HTML에서 ul과 li를 사용하는 방법

HTML에서 ul과 li를 사용하는 방법

下次还敢
下次还敢원래의
2024-04-27 21:00:271120검색

HTML의 UL(순서가 없는 목록)은 항목 목록을 만드는 데 사용되는 반면, li(목록 항목)은 목록의 개별 항목을 나타냅니다. 사용 방법은 다음과 같습니다. 순서가 지정되지 않은 목록 만들기:

  • Item
목록 스타일 지정: 마크업 유형, 패딩 및 간격 수정과 같은 CSS 스타일을 통해 중첩 목록 사용 :

  • 프로젝트
    • 하위 프로젝트

HTML에서 ul과 li를 사용하는 방법

HTML Medium ul 사용 방법 ul과 li

ul과 li가 뭐예요?

  • ul(순서가 없는 목록): 항목 사이에 특정 순서가 없는 항목 목록을 만드는 데 사용됩니다.
  • li(목록 항목): 순서가 지정되지 않은 목록의 개별 항목을 나타냅니다.

ul과 li를 어떻게 사용하나요?

순서 없는 목록 만들기:

<code class="html"><ul>
  <!-- 无序列表中的项目 -->
</ul></code>

목록 항목 추가:

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

목록 스타일 설정

CSS 스타일을 통해 순서 없는 목록의 모양을 설정할 수 있습니다. 예:

<code class="css">ul {
  list-style-type: none;  /* 去除默认的圆点标记 */
  padding: 0;             /* 设置内边距为 0 */
}

li {
  display: inline-block;    /* 设置列表项为内联元素 */
  margin-right: 10px;     /* 设置列表项之间的间距 */
}</code>

중첩 목록 사용

중첩 목록을 사용하여 다단계 목록을 만들 수 있습니다.

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.