수평 줄에 디스플레이를 만드는 방법

Question

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>

Answer 1

목록 항목은 일반적으로 차단 요소입니다. 그것들을 그것을 통해 인라인 요소로 바꾸십시오 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>

Answer 2

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

#ul_top_hypers li {
    float: right;
}

이를 통해 여전히 블록 레벨이 될 수 있지만 같은 라인에 나타납니다.

Answer 3

설정 display 속성 inline 목록의 경우 신청하려는 것입니다. 목록 표시에 대한 좋은 설명이 있습니다 목록.

Answer 4

@alex가 말했듯이, 당신 ~할 수 있었다 오른쪽으로 떠 다니지 만 마크 업을 동일하게 유지하려면 왼쪽으로 띄우십시오!

#ul_top_hypers li {
    float: left;
}

Answer 5

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

#ul_top_hypers li {
    display: inline-block;
}

Answer 6

다른 사람들이 언급했듯이, 당신은 그것을 설정할 수 있습니다 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>

Answer 7

#ul_top_hypers li {
  display: flex;
}