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

如果您想要实现的是那种菜单，我建议在没有任何背景图像的情况下这样做，但是只使用背景颜色和border-radius，我创建了一个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;
}

如果你想要＆＃34;差距＆＃34;删除只删除我添加的margin-right属性。

Answer 2

我不太确定我是否理解你的问题。但在我看来，似乎一切都已经很好地运作了。你只需要给你的列表项目一个宽度和高度，然后......嘿presto。

width: 154px;
height: 32px;

好的，现在你仍然需要相应地调整填充和宽度和高度，但是你明白了。

将背景图像添加到列表项

2 个答案: