1

画像や CSS だけを使用せずに、非常に複雑な 3D っぽいタイプのナビゲーション ボタンを作成しようとしています。これは少し難しい問題で、ちょっとした問題に遭遇したため、私の船は座礁しました。

ボタンをオレンジ色の背景色で塗りつぶしたいのですが、テキストの周りの背景だけが塗りつぶされているように見えますか? それがすべてのスペースを埋めない理由は誰でも知っています。

ありがとう！

<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

要素<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>。

于 2013-02-19T14:17:52.533 に答える
1

background:#e9573f;から#navigation ul li aに移動#navigation ul

于 2013-02-19T14:16:16.363 に答える
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 に答える