CSS를 사용하여 정렬되지 않은 목록 항목을 가로로 표시하는 방법은 무엇입니까?

순서가 지정되지 않은 목록을 가로 행으로 표시하는 방법

CSS를 사용하여 HTML 요소의 형식을 다양한 방식으로 지정할 수 있습니다. 일반적인 스타일 지정 작업 중 하나는 목록 항목을 수직이 아닌 수평으로 정렬하는 것입니다. 이 문서에서는 디스플레이 속성을 사용하여 이 효과를 얻는 방법에 대해 설명합니다.

문제

CSS를 사용하여 목록 항목을 가로로 연속으로 표시하려면 어떻게 해야 합니까?

해결책

목록 항목은 일반적으로 블록 요소입니다. 즉, 자체 줄에 표시됩니다. 수평으로 흐르게 하려면 인라인 요소로 변경해야 합니다. 이 작업은 다음과 같은 표시 속성을 사용하여 수행됩니다.

#ul_top_hypers li {
  display: inline;
}

초기 코드에서는 ul 요소 자체에 display: 인라인 속성을 적용했습니다. 그러나 이는 개별 목록 항목이 아닌 전체 목록에만 영향을 미칩니다. 목록 항목을 가로로 표시하려면 컨텍스트 선택기를 사용하여 해당 항목에 구체적으로 display:inline 속성을 적용해야 합니다.

작업 예

다음은 표시 방법을 보여주는 업데이트된 스니펫입니다. 항목을 가로로 연속해서 나열합니다.

<div><pre class="brush:php;toolbar:false">#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}