1

私は新しいホームページに取り組んでおり、画像をできるだけ避けようとしていますが、ナビゲーションバーの境界線にわずかな問題があります。境界線の側面をパディングで相互にリンクさせる方法を本当に考えることはできません。現時点では、側面は接触していないため、連続して見えません。明らかな何かが欠けているかもしれませんが、それらに会う方法を考えることはできません。誰かアイデアはありますか？

これを解決するために私が考えることができる唯一の方法は、各li要素のクラスを使用することですが、オプションの方法があるかどうか疑問に思っています。

これがあなたがチェックするためのフィドルです：

http://jsfiddle.net/WZF4M/

4

3 に答える 3

1

このjsFiddleの例を試してください。リストアイテムをインラインで表示するのではなく、左にフロートさせました。それはそれらの間のギャップを取り除きます。次に、リスト自体を相対的に配置し、少し上に移動します。

CSS：

ul{
    float: right;
    position:relative;
    top:-14px;
}
li{
    float:left;
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}
于 2012-09-14T16:36:44.650 に答える
1

あなたはliスタイリングで以下を使用したいかもしれませんか？ただし、微調整。すべてのブラウザでテストされているわけではありません。

li{
    display: inline;
    margin-right: -5px; /*Add this*/
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

オプション2：-

ここSOでのよりエレガントなソリューション。

インラインブロックによって生成された余分なマージンスペースを削除するにはどうすればよいですか？

このために、HTMLに変更を加える必要がある場合があります。

<ul>
    <li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>
于 2012-09-14T16:39:01.263 に答える
0

これをより継続的な感覚にするためにできることは、メニューの要素にのみ使用border-rightすることです。li

http://jsfiddle.net/WZF4M/3/

私はあなたのフィドルを更新しました。

これがあなたが探していたものであるかどうか私に知らせてください。

于 2012-09-14T16:37:01.500 に答える