Question

我有一份我从外卖菜单中复制的印度菜肴清单，我需要在其中一些菜单的右边显示零至五个辣椒，以表明它是否是一道热菜。我还需要在素食菜肴旁边显示“V”。我已经购买了几个SVG，缩放并转换为PNG。

我想使用CSS做列表样式;如果我只想显示 EITHER 单个辣椒 OR a'V'（.list-unstyled来自Bootstrap），以下情况有效：

CSS：

li.hot {
    list-style: inside url('../img/chili.png');
    direction: rtl;
}

li.vegetarian {
    list-style: inside url('../img/vegetarian.png');
    direction: rtl;
}

HTML：

<h3>HOUSE SPECIALS</h3>
<ul class="list-unstyled">
    <li class="hot">Gosht achar</li>
    <li class="vegetarian">Mixed vegetable dhansak</li>
    <li>Meti Gosht</li>
</ul>

然而，菜单项旁边最多可以有5个辣椒，它可能是热的 AND 素食者。将它们组合起来的最佳方法是什么，以便我可以使用类似下面的语法？

HTML：

<h3>HOUSE SPECIALS</h3>
<ul class="list-unstyled">
    <!-- The following would display chili.png repeated 5
         times to the right of the list item --> 
    <li class="xxxx-hot">Chicken phaal</li>
    <!-- The following would display chili.png and vegetarian.png
         to the right of the list item -->
    <li class="hot vegetarian">Vegetable biryani</li>
    <li>Meti Gosht</li>
</ul>

Answer 1

您可以通过::after伪元素

执行此操作

<ul>
    <li class="hot hot-1">Gosht achar</li>
    <li class="vegetarian">Mixed vegetable dhansak</li>
    <li class="hot hot-4">Chicken phaal</li>
    <li class="hot hot-1 vegetarian">Vegetable biryani</li>
    <li class="hot hot-3">Hot-3</li>
    <li class="hot hot-2 vegetarian">Hot-2, Vegetarian</li>
</ul>

请注意，我为所有热菜（除了他们的级别）添加了hot类名，因为它们的风格相似。

另外请记住，我使用了两个 16x16 图像作为辣椒和素食者，并且相应地计算了所有宽度/高度。如果您的图片尺寸不同，会根据您的需要更改这些数字。

通用CSS：

ul li.hot:after, /* CSS 2.1 syntax */
ul li.hot::after { /* CSS 3 syntax */
    content:"";
    display:inline-block;
    height:16px;
    background-image:url('../img/chili.png');
    background-repeat:repeat-x;
}
ul li.hot.hot-1:after,
ul li.hot.hot-1::after {
    width:16px;
}
/* hot-2 ... hot-4 */
ul li.hot.hot-5:after,
ul li.hot.hot-5::after {
    width:80px;
}
ul li.vegetarian:after,
ul li.vegetarian::after {
    content:url('../img/vegetarian.png');
    display:inline-block;
}

现在你有两个选择。

如果您想先展示素食：

ul li.hot.hot-1.vegetarian:after,
ul li.hot.hot-1.vegetarian::after {
    width:32px; /* 16+16 */
}
/* hot-2 ... hot-4 */
ul li.hot.hot-5.vegetarian:after,
ul li.hot.hot-5.vegetarian::after {
    width:96px; /* 80+16 */
}

Online demo

如果你想先展示辣椒：

ul li.hot.vegetarian:after,
ul li.hot.vegetarian::after {
    width:16px;
}
ul li.hot.hot-1.vegetarian:after,
ul li.hot.hot-1.vegetarian::after {
    padding-left:16px;
}
/* hot-2 ... hot-4 */
ul li.hot.hot-5.vegetarian:after,
ul li.hot.hot-5.vegetarian::after {
    padding-left:80px;
}

Online demo

根据MDN，这适用于IE＆gt; = 8。

在列表项旁边显示重复的图像

1 个答案: