css 样式表 控制li标签 并成表格显示
<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>
最新回答
近水楼台
2024-05-06 10:04:19
li浮动
a设为块元素并加宽度、行高，文字居中对齐
然后想办法用合适的方式清除下浮动，以免div包不住那些东西
如果上面的你都能自己动手解决了，最下面那个 显示全部 我想你也应该能想出办法来了。
不要看别人现成的代码，步骤就是上面那样，自己动手搞懂一次，比你看几百个别人现成的答案都有效，否则下次你还是不会任何东西。
怎忘
2024-05-06 12:41:12
霓裳梦颜
2024-05-06 09:01:44
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; } /* 第三列的宽度 */
祁梦
2024-05-06 09:04:05
{
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;
}
热门标签
