1

我正在尝试创建一个相当复杂的 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);
}

谢谢！

4

3 回答 3

1

background:#e9573f;从移动#navigation ul li a到#navigation ul

于 2013-02-19T14:16:16.363 回答
1

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

要删除 s 之间的空格<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>的 s 中添加一个填充。

于 2013-02-19T14:17:52.533 回答
0

这是使它工作的 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);
}
于 2013-02-19T17:35:50.910 回答