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

Question

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

我想使用 CSS 来设计列表样式；如果我只想显示 EITHER 一个辣椒 OR 一个“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 个辣椒，并且它可以既是辣的又是和素食的。将它们结合起来的最佳方式是什么，以便我可以使用类似以下语法的东西？

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>=8。