Question

我正在尝试创建一个非常复杂的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>

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

将background:#e9573f;从#navigation ul li a移至#navigation ul

Answer 2

您的<li>元素已设置为显示inline-block。因此，元素之间的空格（也就是说，换行符和缩进空格）在按钮之间呈现为空格。

要删除<li>之间的空格，请删除换行符：

<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>添加填充。

Answer 3

这是让它工作的CSS，不需要对你的HTML进行任何编辑。

这是添加了10px填充的jsfiddle：http://jsfiddle.net/hDVUE/1/

#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);
}

复杂的CSS导航错误

3 个答案: