[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>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <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>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <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>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>답변
#ul_top_hypers li {
display: flex;
}