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个。我可以显示＆＃34;数据链接＆＃34;具有我向用户显示的列表元素的实际数量的属性。无论如何，问题是我想让它变得灵活，这就是我使用calc()来设置<li>宽度的原因。所以，你可能已经知道我想要拥有的东西：而不是在那里展示一些我想做的事情：

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

是的，我知道这是错误的，因为如果我想在CSS中使用attr()它将从这个特定元素获取此属性，而不是像我上面的示例中的父。但是我只想告诉你我想要实现的目标。显然，我可以在每个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
}

如何在CSS中使用不同属性的数据属性而不是'内容'

1 个答案: