<ul>을 가로 행에 표시하는 방법

106

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

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

스 니펫 확장

html css html-lists

— Babiker
소스

좋은 질문. 여기에서 초점은 최신 웹 표준에 따라이를 수행하는 방법입니다

— andy

132

목록 항목은 일반적으로 블록 요소입니다. display속성을 통해 인라인 요소로 변환하십시오 .

제공 한 코드 display: inline에서 목록 자체가 아닌 목록 항목에 속성을 적용하려면 컨텍스트 선택기를 사용해야 합니다 ( display: inline전체 목록에 적용해도 효과가 없음).

#ul_top_hypers li {
    display: inline;
}

다음은 작동하는 예입니다.

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

스 니펫 확장

— hbw
소스

2

또한 float를 사용하여이 효과를 달성하여 목록 항목의 블록 특성을 유지했습니다.

— Joel

1

이것은 흥미로운 접근 방식입니다.하지만, 상자 모델에서 목록 항목을 효과적으로 제거하기 때문에 여백 등으로 불필요한 번거 로움이 발생할 것이라고 생각합니다.

— hbw

1

@htw : clearfix 솔루션을 사용하여 다시 시작할 수 있습니다.

— alex

2

이 단계에서 완전히 지원되지는 않지만 블록 특성을 유지하려면 항상 display : inline-block을 사용할 수 있습니다 (주요 원인은 Fx2라고 생각합니다).

— James B

17

오른쪽으로 뜨도록 설정할 수도 있습니다.

#ul_top_hypers li {
    float: right;
}

이렇게하면 여전히 블록 수준이 될 수 있지만 같은 줄에 나타납니다.

— 알렉스
소스

1

오른쪽으로 플로팅하면 추가 효과가 있습니다. 순서가 바뀌므로 왼쪽에서 오른쪽으로 마지막에서 첫 번째가됩니다.

— Matthew James Taylor

아 예, 마크 업에서 반전되어야합니다 (레이아웃 / 마크 업을 분리하기 위해 너무 많이!)

— alex

11

적용 할 목록 의 display속성을 설정합니다 inline. A List Apart 에 목록 을 표시하는 방법에 대한 좋은 설명이 있습니다.

— 폴 모리
소스

8

@ 알렉스가 말했듯이, 당신은 수있는 바로 그것을 떠 있지만, 같은 마크 업을 유지하기를 원한다면, 왼쪽으로 떠!

#ul_top_hypers li {
    float: left;
}

— Tjhorner
소스

7

그것은 당신을 위해 작동합니다 :

#ul_top_hypers li {
    display: inline-block;
}

— 비 크람 모호 드
소스

4

다른 언급, 당신은 설정할 수 li에를 display:inline;, 또는 float은 li왼쪽 또는 오른쪽으로. 또한, 당신은 또한 사용할 수있는 display:flex;온 ul. 아래 스 니펫에서 justify-content:space-around더 많은 간격을주기 위해 추가 했습니다.

flexbox에 대한 자세한 내용은이 전체 가이드를 확인하세요 .

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

스 니펫 확장

— 매튜 존슨
소스

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
소스