html - 如何在 CSS 中使用不同于 'content' 的属性的数据属性

Question

我有以下 HTML 代码:

<ul data-links="6">
    <li><a href="settings/_users.php">Users</a></li>
    <li><a href="settings/_flows.php">Flows</a></li>
    <li><a href="settings/_file_syncing.php">File syncing</a></li>
    <li><a href="settings/_profile.php">Profile</a></li>
    <li><a href="settings/_billings.php">Billings</a></li>
    <li><a href="settings/_notifications.php">Notifications</a></li>
</ul>

和 CSS 的简化版本:

ul { 
    width: 600px; 
    height: 100px;
    list-style: none;
    padding: 0; margin: 0;
    border: 1px solid #000;
}

li {
    float: left;
    width: calc(600px / 6); /* yes, it gives 100px */
    height: 100px;
}
li:nth-child(2n) {
    background: rgba(0,0,0,0.25);
}

这是demo 。

根据用户的角色，我仅显示 <li> 中的一些此列表中的元素，因此并不总是其中 6 个。我可以显示“数据链接”属性以及向用户显示的列表元素的实际数量。 不管怎样，问题是我想让它变得灵活，这就是我使用 calc() 的原因。用于设置<li>宽度。所以你可能已经知道我想要什么:我不想显示数字，而是想做这样的事情:

width: calc(600px / attr(data-links));

是的，我知道这是错误的，因为如果我曾经想使用 attr()在 CSS 中，它将从这个特定元素获取此属性，而不是像上面的示例那样从父元素获取。不过，我只是想向您展示我想要实现的目标。显然我可以有data-links每个 <li> 上的属性元素而不是 <ul>但这显然是不太干净的解决方案(顺便说一句，也不起作用)

Answer 1

好吧，您甚至不必使用 calc(); 与我的以下方法，请参阅更新的 DEMO HERE

ul {
    width: 600px;
    height: 100px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    display: table;
    table-layout: fixed;
    /* this ensure equal width */
}
ul > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}