基于金额的格式

Question

对于我正在研究的项目，我最近不得不围绕一种方式来解决一个元素的子元素，这种方式基于给定元素中存在多少元素。例如：

<nav>
    <ul>
        <!-- Items here may vary //-->
        <li>Option</li>
        <li>Option</li>
        <li>Option</li>
    </ul>
</nav>

根据我正在运行的脚本，UL标记可以包含3到5个不同大小的LI元素。但是，在布局中，这些都需要具有相同的宽度，并且适合具有固定宽度的块。我也遇到格式问题，在我的LI标签之间产生额外的空白区域，即使我给它们适当的宽度。

Answer 1

基于金额的格式

我提出的解决方案可能不像我见过的其他方法那样先进，包括那些在渲染过程中执行算术计算的方法（为此目的，因为没有任何计算，它可能会略微快速地渲染，但这不是重点。但是，它让我更容易阅读，所以对我来说是优越的。

我推断可以使用复杂选择器的某些组合来精确指定我想要格式化的元素。选择是n-child，n-last-child，first-child和last-child。最初，我做导航＆gt; ul＆gt; li：nth-child（n）：last-child作为我的选择器，但在尝试同时选择所有同级元素时遇到了问题。因此，我决定根据最后一个子元素进行选择。

nav>ul>li{
    width: 100%;
    display: inline-block;
    /* If border, padding, or margin are desirable aesthetically, then a separate
    element should be put inside the LI element and formatted to include it */
    margin: 0;
    padding: 0;
    border: 0;
}
nav>ul>li:nth-last-child(2):first-child,
nav>ul>li:nth-last-child(2):first-child ~ li {
    width: 50%;
}
nav>ul>li:nth-last-child(3):first-child,
nav>ul>li:nth-last-child(3):first-child ~ li {
    width: 33%;
}
nav>ul>li:nth-last-child(4):first-child,
nav>ul>li:nth-last-child(4):first-child ~ li {
    width: 25%;
}
nav>ul>li:nth-last-child(5):first-child,
nav>ul>li:nth-last-child(5):first-child ~ li {
    width: 20%;
}
/* Repeat ad nauseum */

在此方法中，选择了N个兄弟姐妹的第一个孩子，然后也选择了所有兄弟姐妹。

非统一格式

使用这种方法，你也可以聪明地改变规则，具体取决于兄弟姐妹的数量。此示例将第一个和最后一个LI元素设置为20％宽度，中间一个设置为60％宽度（对于某些布局目的可能很好，并且在某些情况下难以完成某些计算）：

nav>ul>li:nth-last-child(3):first-child,
nav>ul>li:nth-last-child(3):first-child ~ li:last-child {
    width: 20%;
}
nav>ul>li:nth-last-child(3):first-child ~ li:nth-child(2) {
    width: 60%;
}

修复空白区问题

我必须做一些挖掘工作，因为我实际上在这里找到了这个解决方案，而且我希望在它到期时给予积分，但我很难跟踪它（如果主持人知道想要将其编辑在哪里，我将非常感激。基本上，问题的要点是内联块元素呈现为文本，因此所有元素之间至少有一个不间断的空间。

我已经看到了三种解决方案，每种解决方案都有其优点和缺点。

删除空间

As described here，此方法从元素之间删除空格。这可能是语义上的首选方法，因为它至少依赖于格式化tomfoolery。这种方法的缺点是所讨论的元素越复杂，它就越混淆。实质上，有问题的代码变成了这样：

<nav>
    <ul>
        <!-- Items here may vary //-->
        <li>Option</li><li>Option</li><li>Option</li>
    </ul>
</nav>

浮动元素

As described here，此方法向LI元素添加两个简单的CSS属性。它首先将所有元素浮动到左侧，将它们设置为在任何渲染文本之前按顺序显示，然后将它们设置为不尝试相互清除。这个的主要缺点是任何其他浮动元素可能与这些元素交互，浮动元素也比其他元素更频繁地行为不端（一些浏览器似乎不确定如何处理浮动元素，特别是在遗留元素中）。规则是：

nav>ul>li {
    float: left;
    clear: none;
}

隐藏文字

这是我很难找到的答案 - 不用说，这不是我的想法。然而，这是我为我的情况所采用的解决方案。假设我们不想混淆代码或浮动元素，使用CSS，我们仍然可以控制文本呈现的方式（我们必须记住，不间断的空间仍然是文本）。本质上，我们将文本缩小为font-size 0.这里的缺点是我们需要确保LI元素（及其子元素）具有正确的字体大小。这意味着我们需要两个规则：

nav>ul {
    font-size: 0;
}
nav>ul>li {
    /* Note, you can change this as needed, just don't delete it. */
    font-size: initial;
}

您可能还需要编写另一条规则，具体取决于您对LI元素内容的控制程度：

nav>ul>li * {
    /* Note, you can change this as needed, just don't delete it. */
    font-size: initial;
}

希望这对你有所帮助！：d

CSS：基于子元素数的格式（奖励：消除额外的空白）

1 个答案:

基于金额的格式

修复空白区问题