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

Question

我正在尝试创建一个以背景图像作为元素符号的无序列表。图像的高度为 80px，因此我将行内高度定义为 80x。问题是我的一些子弹太长了，跑到第二行了。我想让第二行适合原来的 80px。我将如何做到这一点，以便我有一些带有 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;
}