html - 带有图像背景的无序列表，如果 1 或 2 行，则使其高度相同

Question

我正在尝试使用背景图像作为项目符号的无序列表。图像高度为 80 像素，因此我将内联高度定义为 80 倍。问题是我的一些子弹太长而进入第二行。我想让这第二行适合原来的 80 像素。我将如何做到这一点，以便我有一些带有 1 行的项目符号与项目符号图像垂直居中，以及一些项目符号是 2 行并且也与图像垂直居中，无论数量多少，每个项目符号行都将是 80px线。

这是我当前的代码：

<ul id="star-wars">
      <li id="one">blablabla</li>
      <li id="two">blablavla</li>
</ul>


#star-wars
{
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    font-size: 18px;
    list-style-position:inside;
}

#star-wars li
{
    background-image: url(images/star-wars-icons/Han-Solo-02-icon.png);
        padding-left: 100px;
    background-repeat: no-repeat;
    line-height: 80px;
}

Answer 1

看起来您只是忘记将高度值设置为列表。

#star-wars li {
    height:80px;
}