CSS导航图像背景

Question

我正在为wordpress制作模板，我无法解决这个问题：

我有导航的风格：

<style>
body {
 background: #FFFBD0;
}

/* Navigation */
ul {
 list-style-type:none;
 margin:0;
 padding:0;
}

.menu-item
{
 padding: 22px 20px 22px 20px;
 background:url('images/button_brown.png') no-repeat;
 display:inline;
}

a {
 color: #FFFBD0;
 text-decoration:none;
}

</style>

和我的导航：

<div class="div-menu">
<ul id="menu" class="menu">
    <li class="menu-item"><a href="">Home</a></li> 
    <li class="menu-item"><a href="">Button 2</a></li>
    <li class="menu-item"><a href="">Button 3</a></li>
</ul>
</div>

现在我试图设置这样的按钮：

http://tinypic.com/r/2lmxb42/8

Answer 1

您不需要使用图像背景。您可以使用background-color和border来完成此操作。您将a设置为边框，点缀和白色。然后你给a主填充。然后，将包含li的{​​{1}}设置为具有非常小的填充。给a一个li，你就可以了。

Working Fiddle

代码

HTML：

background-color

CSS：

<div class="div-menu">
    <ul id="menu" class="menu">
        <li class="menu-item"><a href="">Home</a></li> 
        <li class="menu-item"><a href="">Button 2</a></li>
        <li class="menu-item"><a href="">Button 3</a></li>
    </ul>
</div>

目标：

结果：

Answer 2

检查此jsFIddle

HTML

<div class="div-menu">
    <ul id="menu" class="menu">
        <li class="menu-item"><a href="">Home</a></li> 
        <li class="menu-item"><a href="">Button 2</a></li>
        <li class="menu-item"><a href="">Button 3</a></li>
    </ul>
</div>

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.menu-item {
    display:inline-block;
    background:rgb(64,18,20);
    padding:2px;
}

.menu-item a {
    display:block;
    padding: 9px 24px 9px 24px;
    font-size:21px;
    color: #FFFBD0;
    text-decoration:none;
    border:dotted 1px white;
}