我试图实现6列流体布局,如下所示:
<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>
我的列表应该是100%宽度,并且每个列表元素LINK(ul li a)应该适合它。做了一些研究,没有找到符合我要求的任何6柱流体布局(或者我太累了,看不到它)。
任何意见?
TIA
答案 0 :(得分:2)
使用float
上的css li
和16.66666666666667%
的宽度,这意味着100/6
。
这是一个示例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;
}
&#13;
<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>
&#13;