1

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

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

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

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

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

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

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>

这是一张图片来说明我想要实现的目标：

伪图像

提前致谢。

4

2 回答 2

2

我能想到的最好的两个解决方案：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);

对于图标

于 2012-08-12T02:40:53.300 回答
0

好的，我发现了如何解决它。我很确定这不是理想的解决方案，但它似乎没有任何问题（然而，在我尝试过的浏览器中）。

如果有人有更好的解决方案，请告诉我。

这是整个代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Another dirty (but better) solution</title>
<style type="text/css">
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
ul {
    overflow:auto;
    width:18em;
    height:6em;
    list-style:none;
    margin:0;
    padding:0;
}
li {overflow:hidden;}
li .icons {
    float:left;
    margin:-0.1em 0;
}
li .icons .icon1 {
    display:inline-block;
    width:13px;
    height:12px;
    vertical-align:middle;
    background-color:red;
}
li .icons .icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    vertical-align:middle;
    background-color:green;
    margin-bottom:1px; /* here's the dirty hack: (icon1.height-icon2.height) / 2 */
}
li a {
    color:inherit;
    text-decoration:none;
    display:block;
    padding:0 4px;
    margin-left:24px;
}
li a:hover {
    background-color:lightgray;
}
</style>
</head>
<body>
    <ul>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Some link text</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Some other link text</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">A longer link text here</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Shrt lnk txt</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Much much looooonger text in here</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Just another link text</a>
        </li>
    </ul>
</body>
</html>
于 2012-08-12T23:54:18.697 回答