如何在与“内容”不同的属性中使用 CSS 中的数据属性 [重复]

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));

是的，我知道这是错误的，因为如果我曾经想在 CSS 中使用 attr()，它会从这个特定元素获取这个属性，而不是像上面的示例那样从父元素获取。但是，我只是想向您展示我正在努力实现的目标。显然，我可以在每个 <li> 元素上使用 data-links 属性而不是 <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
}