css - 短い線で上マージン、実線で下マージンを取得する方法

Question

説明よりも簡単に表示できます...

Web サイトのメニューの場合、「あまり長くない行」を一番上に、その下に完全な行を表示したいと思います。メニューを保持する 1 つのクラス (つまり、topnav) でそれを行うことは可能ですか? または、これを行うにはさらに多くの要素が必要ですか?

Answer 1

これを行う最も簡単な方法は、コンテナー要素とメイン要素の 2 つの要素を用意することです。コンテナ要素は幅 100% で、下の境界線が必要ですが、メイン要素は必要なだけ幅があり、上端の境界線が必要です。

divコンテナulとして、また「メイン」要素として使用できます。

@Brewal の助けを借りて、次のようになります: http://jsfiddle.net/GTG6U/3/

<div id="wrap">
    <ul id="menu">
        <li>Here are</li>
        <li>many wonderful</li>
        <li>menus</li>
        <li>etc</li>
    </ul>
</div>

li {
    float: left;
    padding: 0 10px;
    list-style: none;
    margin: 0;
    text-align: center;
    height: 20px;
}
#menu {
    display: inline-block;
    margin: auto;
    height: 20px;
    padding: 10px 0;
    border-top: 1px solid green;
}
#wrap {
    border-bottom: 1px solid green;
    text-align: center;
}

Answer 2

個人的には、一番上の行をメニュー要素の幅にして、<hr />または類似のものを下端にすることをお勧めします。

とはいえ、単色の背景がある場合は、これを試すことができます。

#menu {
    position:relative;
    border-top:1px solid black;
    border-bottom:1px solid black;
}
#menu:before, #menu:after {
    position:absolute;
    top:-1px;
    width:32px;
    height:3px;
    background:white;
}
#menu:before {left:0}
#menu:after {right:0}