Html 复杂CSS导航错误

我正在尝试创建一个相当复杂的3D ish，类型导航按钮，而不使用任何图像和CSS！这是一个小小的挑战，我的船搁浅了，因为我遇到了一个小问题

我希望我的按钮填充橙色背景色，但似乎只有文本周围的背景被填充？任何人都知道为什么它不能填满所有的空间

谢谢

<div id="navigation">
    <ul>
        <li><a href="#about">about</a></li>
        <li><a href="#work">work</a></li>
        <li><a href="#blog">blog</a></li>
        <li><a href="#contact">contact</a></li>
    </ul>
</div>

---

谢谢

Move

background:#e9573f从
#导航ul li a
到
#导航ul
您的
元素设置为显示
内联块
。因此，元素之间的空格（即换行和缩进空格）呈现为按钮之间的空格

要删除
之间的空白，请删除换行符：

<li><a href="#about">about</a></li><li><a href="#work">work</a></li><li><a href="#blog">blog</a></li><li><a href="#contact">contact</a></li>



若要为按钮添加更多空间，请在
s中添加一个填充。
这是CSS使其工作，无需对html进行任何编辑

下面是添加了10px填充的JSFIDLE：

然后可能会更改边界属性
<li><a href="#about">about</a></li><li><a href="#work">work</a></li><li><a href="#blog">blog</a></li><li><a href="#contact">contact</a></li>

#navigation{
    position: relative;
    top:20px;
    display: inline-block;
    vertical-align: top;
    z-index: 99999;
    background:rgba(0,0,0,0.07);
    padding:6px 6px 11px 6px;
    border-radius: 3px;
    box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), 0px 1px 0px #fff;
}
#navigation ul{
    float:left;
    border-radius:3px;
    box-shadow: 0px 5px 0px #c6412b;    
}
#navigation ul li {
    float:left;
    vertical-align: top;
}
#navigation ul li a {
    background:#e9573f;
    font-size:22px;
    display: block;
    color: #fff;
    border-right:1px solid #d44a34;
    border-left:1px solid rgba(255, 255, 255,0.2);
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
    border-bottom:1px solid rgba(255,255,255,0.2);
}