<li> 具有嵌套和标签的<a> <img> 标签之间的间距相等的问题

Question

我尝试用<ul>和<li>标记做一个很好的列表。我的问题是，我希望在<li>之间有相等的空间。在我的例子中，其中一个<li>包含一个<a>标签，后跟一个<img>标志标签，它本身包含在一个<a>标签中。

代码如下:

<ul>
<li><a class="bottom_link" href="test1">Image for test 1</a></li>
<br>
<li><a class="bottom_link" href="test2">Image for test 2 using yunka</a></li>
<br>
    <li class="withlogo"><a class="bottom_link" href="test3">Compression and Decompression using test 3</a> <a class="bottom_link" href="test3.pdf"><img class="logo" width="40" height="40" src="pdf-logo.gif"></a></li>
 <br>
        <li><a class="bottom_link" href="test2">Image for test 4 using polif</a></li>
    </ul>

您可以查看结果:jsfiddle

可以看到，最后一个<li>文本没有与项目符号对齐。

我设法解决了第一个问题(我不能在jsfiddle上重现它)，但它仍然是一个主要问题:

如何在所有<li>标签之间保持相等的空间(即使第三个有嵌套的<img>标签(pdf徽标))?

我尝试使用:

  line-height: auto;
  height: auto; 

但是它不工作。

谢谢你的帮助

Answer 1

要使vertical-align工作，请使用display:inline-block代替block。如果你将a的line-height设置为等于图像高度，则空格将相等。

a.bottom_link:active,a.bottom_link:visited,a.bottom_link:link{
    font-weight: bold;
    text-decoration: none;
color: #004478;  
             line-height: 40px;
height: auto; 
}
li { 
display: inline-block;
    width: 100%;
    height: 40px;
                 padding-left: 17px;
                 background-image: url(http://kawito.dyndns-at-home.com/bullet1.png);
                 background-repeat: no-repeat;
                 background-position: left center ;              
                 vertical-align: middle;
}

img.logo  {
    vertical-align: middle;
}

这里是小提琴http://jsfiddle.net/abm4r49y/16/

Answer 2

我可能搞错了，但是行高对所有元素都有效。其中一个元素是你的背景图像。尝试删除图像或将其导入标签，它将开始依赖于其高度的行高。

但是你需要给他合适的高度。

希望能有所帮助。

Answer 3

现在定义您的li line-height

li{line-height:40px;}

和此li.withlogo 删除 line-height和height

Answer 4

你可以为所有的li元素设置最大行高 px，

后面为img。标志设置高:100% ,和宽度:汽车

Answer 5

您的问题是li和ul是内联显示。你必须将display=block设置为li selector