在菜单中添加<li>的水平线</li>

Question

我有一个带有列表项图像的菜单，我想用水平线连接这些图像。

<ul>
    <li>
        <a href="#" title="Item1"><img src="foo/bar.png"></a>
    </li>
    <li>
        <a href="#" title="Item2"><img src="foo/bar2.png"></a>
    </li>   
</ul>

为了更好地解释，我展示了2张图片：

我想转换

到

我不知道定位一个＆＃39; line.png＆＃39;像那样或者用纯净的css制作它。

Answer 1

皇冠，

希望这个链接有帮助...

[http://jsfiddle.net/Karthik_Dev/mwjzcnqe/][1]

确保线条图像的大小为1 x 4 in px。

欢迎评论

Answer 2

有很多方法可以达到这个目的，但是使用你的方法，试试这个：

ul{background:url(images/line.png) repeat-x 50%; display:block;}
li{display:inline-block}

其中line.png就像图片中的一行

Answer 3

<div>
  <a href="#" title="Item1"><img src="foo/bar.png"></a>
  <a href="#" title="Item2"><img src="foo/bar.png"></a>
</div>

div {
  height: 20px;
  border-bottom: 4px #ddd;
}

div a {
  display: block;
  float: left; // or display: inline-block and centered on parent div
  margin: 0 10px;
  width: 44px;
  height: 44px;
}