CSS: 元素有 3 个内联 block 元素，最后占据最大空间

Question

在无序列表的每个列表项中，我有 2 个内联 block 元素和一个 anchor 文本，它们彼此相邻。所以在每个 <li>有 2 个图标和一个文本。

我制作这两个图标的原因 display:inline-block是因为它们有不同的高度，它们旁边的 anchor 文本偶尔会变成多行，我可以通过 vertical-align 将它们居中到第一行规则。

无论如何，这个 anchor 标签有一个 :hover样式，基本上是 background-color:gray .出于某种原因，我无法通过任何通用解决方案成功阻止此 anchor 元素。

我所做的工作有点奏效，但我不能依赖这个解决方案，因为我对 <ul> 使用了硬编码 with和 <a>宽度，当列表需要滚动条时，这些宽度需要减去条宽度。以下是我目前的解决方案，如果这对某人有所启发的话。

我试着给 anchor 文本一个 margin-left 并将其设置为 display:absolut ，无济于事。我也尝试给出百分比，但又一次……最终我尝试 float 元素，但这可能是这里最错误的解决方案，因为文本的多行可能性和将每个元素居中在文本第一行的垂直中心。我的下一个猜测是在每个列表项中使用一个表格，但这可能是可用的最肮脏的解决方案，除非万不得已，否则我不想使用它。

你会怎么做？如果您需要更多详细信息，请告诉我。

CSS

ul {
    overflow:auto;
    height:6em;
    width:320px;
}
li .icon1 {
    display:inline-block;
    width:13px;
    height:12px;
    vertical-align:top;
    background:url(image.jpg) left top no-repeat;
}
li .icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    margin-right:2px;
    background:url(image.jpg) left -12px no-repeat;
}
li a {
    display:inline-block;
    padding-left:4px;
    vertical-align:top;
    width:270px;
}
li a:hover {
    background-color:lightgray;
}

HTML

<ul>
    <li>
        <div class="icon1"></div>
        <div class="icon2"></div>
        <a href="#">Some anchor text</a>
    </li>
    <!-- many other li items in here -->
</ul>

这是一张图片来说明我正在努力实现的目标:

提前致谢。

Answer 1

我能想到的最好的两个解决方案在哪里:1)使用下面的例子CSS:

ul {
    overflow:auto;
    height:6em;
    width:320px;
}
.icon1 {
    width:13px;
    height:12px;
    vertical-align:top;
    background:url(image.jpg) left top no-repeat;
    border: 1px solid black;
}
.icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    margin-right:2px;
    background:url(image.jpg) left -12px no-repeat;
}
li a {
    display:block;
    padding-left:4px;
    vertical-align:top;
    border: 1px solid black;
}
li a:hover {
    background-color:lightgray;
}

HTML:

<ul>
    <li>
        <a href="#"><img class="icon1" src="image.jpg" alt="icon1"/><img class="icon2" src="image.jpg" alt="icon2"/>Some label in here!</a>
    </li>
    <li>
        <a href="#"><img class="icon1" src="image.jpg" alt="icon1"/><img class="icon2" src="image.jpg" alt="icon2"/>Some label in herdsafasdfasdfsad sadfasd sadfasd asdfsade!</a>
    </li>
</ul>

2) 您还可以将背景图像添加到 li 元素:

background-image: url(image.jpg); 

图标