Question

css 样式表 控制li标签 并成表格显示

代码如下：如何用CSS 变成如图显示的效果
<div class="SubCategoryBox" > <ul> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">佳能</a><i>(30440)</i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示全部品牌</span></a> </div>

</div>

Answer 1

div弄个边框
li浮动
a设为块元素并加宽度、行高，文字居中对齐
然后想办法用合适的方式清除下浮动，以免div包不住那些东西

如果上面的你都能自己动手解决了，最下面那个 显示全部 我想你也应该能想出办法来了。

不要看别人现成的代码，步骤就是上面那样，自己动手搞懂一次，比你看几百个别人现成的答案都有效，否则下次你还是不会任何东西。

Answer 2

定义li的宽度width并转为块级元素display:block 然后左浮动float:left设置文字居中text-align:center，就能达到图片中的效果 你这个是锋利的Jquery 里面的一个例子吧

Answer 3

li {float:left; width:33%; text-align:center}

li 设置左浮动，宽度为 1 / 3，文本居中

如果要像上图一样。。

可以设置每一列的宽度，以达到目的。。

li:nth-child(3n+1) {width:200px; } /* 第一列的宽度 */
li:nth-child(3n+2) {width:400px; } /* 第二列的宽度 */
li:nth-child(3n) {width:200px; } /* 第三列的宽度 */

Answer 4

.SubCategoryBox
{
width:440px;
height:300px;
border:1px solid #000;

}
.SubCategoryBox ul
{
list-style:none;
}
.SubCategoryBox ul li
{
float:left;

width:120px;
text-align:center;
}
.showmore
{
clear:both;

width:200px;
margin:0 auto;
border:1px solid #ccc;
}