6 열 유체 레이아웃

Question

나는, 6 열 유체 레이아웃을 달성과 같이하기 위해 노력하고있어 : 100 % 폭과리스트의 모든 요소 LINK (UL 리 a가)에 동등하게 맞아야해야

<ul class="list"> 
    <li class="list-element first"> 
     <a>Item 1</a> 
    </li> 
    <li class="list-element"> 
     <a>Item 2</a> 
    </li> 
    <li class="list-element"> 
     <a>Item 3</a> 
    </li> 
    <li class="list-element"> 
     <a>Item 4</a> 
    </li> 
    <li class="list-element"> 
     <a>Item 5</a> 
    </li> 
    <li class="list-element last"> 
     <a>Item 6</a> 
    </li> 
</ul> 

내 목록 그것. 약간의 연구를 했는데도 내 요청과 일치하는 6 열 유체 레이아웃을 찾지 못했습니다 (아니면 그냥보기에는 너무 피곤합니다).

의견이 있으십니까?

TIA

Answer 1

사용 li에 CSS를 float이이 100/6 의미 16.66666666666667%의 폭입니다.

여기에 샘플 CSS가 있습니다. 그리고 fiddle

.list { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .list li { 
 
    width: 16.66666666666667%; 
 
    float: left; 
 
    } 
 
    .list li a { 
 
    display: block; 
 
    border: 1px solid #ddd; 
 
    text-align: center; 
 
    }

<ul class="list"> 
 
    <li class="list-element first"> 
 
    <a>Item 1</a> 
 
    </li> 
 
    <li class="list-element"> 
 
    <a>Item 2</a> 
 
    </li> 
 
    <li class="list-element"> 
 
    <a>Item 3</a> 
 
    </li> 
 
    <li class="list-element"> 
 
    <a>Item 4</a> 
 
    </li> 
 
    <li class="list-element"> 
 
    <a>Item 5</a> 
 
    </li> 
 
    <li class="list-element last"> 
 
    <a>Item 6</a> 
 
    </li> 
 
</ul>