Question

I try to do a nice list with <ul> and <li> tags. My issue is that I would like to have equal space between <li>. In my case, one of the <li> contains a <a> tag followed by a <img> logo tag itself included in a <a> tag.

Here is the code :

<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>

You can check the result on : jsfiddle

的

标签之间空格相等的问题

如您所见，最后一个<li>文字未与子弹对齐。

我设法解决了第一个问题（我无法在jsfiddle上重现它），但它仍然是一个主要问题：

如何在所有<li>标记之间保持相等的空格（即使第三个标记具有嵌套的<img>标记（pdf徽标））？

我试图使用：

  line-height: auto;
  height: auto;

但它没有用。

感谢您的帮助

Answer 1

要使vertical-align有效，请使用display:inline-block代替block。如果您将行高设置为等于图像高度，则空格将相等。

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

我可能会弄错，但是行高会计入所有元素。其中一个元素是li部分背景中的图像。尝试删除图像或将其导入标记，它将开始取决于它在行高上的高度。

但你需要给他正确的身高。

希望它有所帮助。

Answer 3

您好现在定义li line-height

li{line-height:40px;}

此li.withlogo 删除 line-height和height

<强> Demo

Answer 4

您可以在px中为所有li元素设置最大行高，

之后，img.logo设置高度：100％，宽度：自动

Answer 5

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

带有嵌套<a> and <img/> tags

5 个答案: