CSS에서 정렬되지 않은 목록을 가로로 표시하는 방법은 무엇입니까?

만드는 방법 가로 행에 표시

CSS에서 목록 항목은 일반적으로 블록 요소로 표시됩니다. 즉, 컨테이너의 전체 너비에 걸쳐 표시됩니다. 그러나 목록 항목이 가로로 연속해서 표시되도록 할 수도 있습니다. 이를 달성하려면 다음 단계를 따르세요.

1. 디스플레이 구현: 인라인; 목록 항목에

목록 항목을 인라인으로 표시하려면 display: inline; 그들에게 재산. 그러나 이 속성을

요소에는 아무런 영향이 없습니다. 대신 컨텍스트 선택기를 사용하여
:

#ul_top_hypers li {
    display: inline;
}

2. 상위 컨테이너 조정(선택 사항)

제공된 코드에서 상위 컨테이너(#div_top_hypers)에도 display: inline; 적용된. 목록 항목을 가로로 표시하는 데는 이것이 필요하지 않지만 경우에 따라 원치 않는 동작을 방지할 수 있습니다.

예

다음 코드 조각은 이러한 구현을 보여줍니다. 단계:

#div_top_hypers {
    background-color:#eeeeee;
}

#ul_top_hypers li {
    display: inline;
}

<div>

이 단계를 따르면 목록 항목을 가로로 쉽게 표시할 수 있습니다. CSS를 사용하는 행.

위 내용은 CSS에서 정렬되지 않은 목록을 가로로 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!