내가 예를 들어 내가 현재의 마크 업이 중첩 된 목록 마크 업에서 수평 목록을 만들려고 해요 사용 :수평 중첩 된 목록 CSS
<ul>
<li class="alone">List Item 1</li>
<li class="alone">List Item 2</li>
<li class="alone">List Item 3</li>
<li class="group">List Item 4
<ul>
<li class="not_alone">List Item 4a</li>
<li class="not_alone">List Item 4b</li>
<li class="not_alone">List Item 4c</li>
<li class="not_alone">List Item 4d</li>
</ul>
</li>
<li class="alone">List Item 5</li>
</ul>
내가이 비슷한 무언가를 달성하기 위해 싶습니다
를<style>
div { display: inline-block; }
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; }
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.item { padding: 2px; margin: 0 2px; }
</style>
<div class="wrapper">
<div class="alone item">List Item 1</div>
<div class="alone item">List Item 2</div>
<div class="alone item">List Item 3</div>
<div class="group item">
List Item 4
<div class="group item">List Item 4a</div>
<div class="group item">List Item 4b</div>
<div class="group item">List Item 4c</div>
<div class="group item">List Item 4d</div>
</div>
</div>
<div class="alone item">List Item 5</div>
</div>
여기에서 데모를 볼 수 있습니다. http://jsbin.com/exivi5.
기존의 중첩 목록 마크 업을 사용하면 가능합니까? 또한 전체 뷰포트에 맞도록 ul 상위 목록의 너비를 100 %로 유지할 수 있습니까?
이것은 FF, Webkit 및 IE7 +에서 호환되어야하지만 IE8 + 지원을 위해 정정됩니다.
미리 감사드립니다.
귀하의 질문에 정확히 무엇입니까? div 요소에 이미 적용 할 준비가되어있는 div 기반 마크 업에 필요한 것을 가지고 있지 않습니까? –
div와 같은 클래스 대신 ul-li 요소를 사용하면 같은 결과를 얻지 못합니다 ?? – Sotiris
아니요, 똑같은 결과가 나옵니다. – schone