0

こんばんは、

ボタンの間に隙間がなく、画面に一元化されたナビゲーションバーが欲しいのですが。'float：left'を使用することで、ギャップを埋めることができることに気付きました。ただし、これにより、ナビゲーションバーが左にフラッシュされます。'float：left'がないと、ギャップはまだ集中化されます。誰かが私を助けてくれたら幸いです。ありがとう！

私のCSSコードは次のとおりです。

#nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

#nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

#nav li {
    margin: 0px;
    display: inline;
}

#nav li a {
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #086ba9;
    float: left
}

#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}

以下は私の部分的なhtmlコードです：

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Crawler</a></li>
        <li><a href="#">Visual Analytics</a></li>
    </ul>
</div>

乾杯、ZH

4

2 に答える 2

0

動作するコードは次のとおりです。

http://jsfiddle.net/surendraVsingh/vU4C8/1/

CSSで行われる変更：

#nav ul {
 list-style-type: none;
 padding: 0;
 display:inline-block; /* Add This*/
}

注： 100％の幅をとる他のブロック要素とは異なり、liに応じた幅のみをとるdisplay:inline-blockように追加されます。ul

于 2012-07-03T14:59:56.093 に答える
0

このアプローチが「健康的」であるかどうかはわかりませんが、それは私にとってトリックでした

#nav ul a{margin:0 -2px;}
于 2013-12-29T11:45:01.127 に答える