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

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>

스 니펫 확장

답변

목록 항목은 일반적으로 블록 요소입니다. 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>

스 니펫 확장

답변

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

#ul_top_hypers li {
    float: right;
}

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

답변

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

답변

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

#ul_top_hypers li {
    float: left;
}

답변

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

#ul_top_hypers li {
    display: inline-block;
}

답변

다른 언급, 당신은 설정할 수 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>

스 니펫 확장

답변

#ul_top_hypers li {
  display: flex;
}