css - 使用 CSS 从单个链接 div 中制作短列的表格框

Question

我有这个插件可以显示 Wordpress 的标签云（http://www.hothouseblog.org/）。通常它显示在水平运行列表中。我寻求将这个列表变成三或四列垂直运行项目的答案。

使用 CSS，我已经让项目按行显示，但链接仍然水平运行，而我希望项目垂直堆叠。这是白日梦吗？

.widget_tag_cloud {
display: table;
background-color: #000000;
padding: 10px 20px;
width: 580px;
height: 200px!important;}

.widget_tag_cloud a {
font-size: 14px!important;
text-transform: uppercase;
float: left;
width: 100px;
display: block;}

Answer 1

在其当前的 html 格式中，是的，这将是一个白日梦。锚元素不是为此而设计的。您必须将它们分成div列或将它们拆分为ul >li列表堆栈。而且display: table;这里不太合适。

除非可能使用多个伪类，否则几乎不可能以您尝试的方式填充一个框，并使用垂直约束，:nth-child()但这将是一个复杂的解决方案，需要 IE8 的 javacript polyfill 来支持它。