html - 复杂的 CSS 导航错误

Question

我正在尝试创建一个相当复杂的 3D 式导航按钮，而不使用任何图像，只使用 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>

CSS

#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{
    border-radius:3px;
    box-shadow: 0px 5px 0px #c6412b;    
}
#navigation ul li {
    display: inline-block;
    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);
}

谢谢!

Answer 1

你的 <li>元素设置为显示 inline-block .因此，元素之间的空白(即换行符和缩进空格)呈现为按钮之间的空白。

删除 <li> 之间的空格s，删除换行符:

<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>

要为您的按钮添加更多空间，请为您的 <li> 添加填充