javascript - 如何格式化一个简单的在列中并在其自己的行上加粗第一项

Question

我试图弄清楚如何在 HTML 中获取一个简单的（长 - 五十多个选项）列表并应用 CSS 样式以在第一行以粗体显示第一项，然后让后续列表项出现在至少三个中或五列。

如果有人有一个简单的例子，我肯定会很感激。

PS 我想为我的 Drupal 7 站点上的特定 Ubercart 3 产品页面执行此操作 - 我想知道这是否必须在整个站点范围内完成，或者是否可以针对特定产品完成。

感谢您的时间。

Answer 1

这是一些用于在列中显示列表的 CSS。

ul {
    display: block;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    float: left;
    width: 24%; /* 24% will give you four columns */
    margin: 5px 1% 0 0;
    padding: 0;
    height: 50px; /* if it's products, a height will help them float nicely. if it's text this is a bit harder */
}
li:first-child { /* target the first list item - your selector should be more specific than this or it will affect more than what you intend it to affect */
    font-weight: bold;
}

这个 CSS 并不完美。如果您的列表项只是文本，则某些项必然会换行，这会与浮点数混淆（因此是高度）。它还放置这样的列表项：

1   2   3   4
5   6   7   8

如果你追求这个，

1   3   5   7
2   4   6   8

您可能最好考虑使用CSS3 Columns，但在此之前，请查看浏览器支持。

编辑：如果您使用浮动技术，您还需要clearfixul元素。