html - 将背景图像添加到列表项

Question

我想将按钮图像添加为列表项的背景。此处的列表项必须是水平的，并且每个列表项之间不应有间隙。

<nav class="clearfix"><!-- START 'nav' -->
      <h2 class="slide-trigger">Menu <span></span></h2>
      <ul class="navigation clearfix">
        <li class="current"><a href="#">HOME</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">GALLERY</a></li>
      </ul>    
      <!--a href="#" id="pull">Menu</a-->
    </nav>

风格:

nav li {float: left; list-style: none; font-size:13px;
background-image:url("http://s17.postimg.org/8y5rvkw3v/menu_bg.jpg");
background-repeat: no-repeat;

Answer 1

如果你想要实现的是那种菜单，我建议不要任何背景图像，但只使用背景颜色和边框半径，我创建了一个 jsfiddle:

http://jsfiddle.net/xMZRT/

nav li {
    float: left; list-style: none; font-size:13px;
    background-color: #e3e3e3;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px;
    padding:5px;
    margin-right:5px;
}

如果您想要删除“间隙”，只需删除我添加的 margin-right 属性即可。