1

www.amyatsuk.com

バリデーターを通してコードを実行しましたが、順序付けられていないリスト内に div を組み込む方法が気に入りませんでした。ドロップダウンナビゲーションメニューに内側の境界線を取得しようとしています。

これと同じ効果を達成する有効なマークアップは何ですか?

HTML:

<div id="linksLeft">
    <ul class="menu">
        <li id="about"><a href="#">about</a></li>
        <li id="portfolio"><a href="editorial.html">portfolio</a>
        <ul class="subMenu" id="subNav"> **<div id="subnavborder">**
            <li><a href="editorial.html">editorial</a></li>
            <li><a href="advertising.html">advertising</a></li>
            <li><a href="packaging.html">packaging</a></li>
            <li><a href="photography.html">photography</a></li> **</div>**
        </ul>
        </li>
    </ul>
</div>

CSS:

#subnavborder {
    margin:10px;
    border: 6px solid white;
    border-radius:6px;
}
4

3 に答える 3

1

私は次のように:after疑似セレクターを使用します：

フィドル

.subMenu:after {
    content: '';
    display: block;
    border: 6px solid white;
    border-radius:6px;
    position: relative;
    width: figure it out;
    height: figure it out;
    left: figure it out;
    top: figure it out;
}
于 2013-02-28T16:36:43.617 に答える
1

2つの選択肢

通常の境界線を使用する通常 のフィドル。 および 内部境界の使用内部フィドル

通常の境界線 このクラスを使用して、UL要素の境界線スタイリングを実現できます。

.subnavborder {
    margin:10px;
    border: 6px solid black;
    border-radius:6px;
}

他の理由がない限り、次のようにdivマークアップは必要ありません。

<div id="linksLeft">
    <ul class="menu">
        <li id="about"><a href="#">about</a></li>
        <li id="portfolio"><a href="editorial.html">portfolio</a>
        <ul class="subMenu subnavborder" id="subNav"> 
            <li><a href="editorial.html">editorial</a></li>
            <li><a href="advertising.html">advertising</a></li>
            <li><a href="packaging.html">packaging</a></li>
            <li><a href="photography.html">photography</a></li> 
        </ul>
        </li>
    </ul>
</div>

この 通常のフィドルでそれを見てください。表示するために境界線の色を変更しました。その後、超過クラスを自由に調整します。

内部境界の代替

半径を維持したい場合は、この例のように疑似要素セレクターを使用する必要があります

以前と同じマークアップを使用しています。黒い境界線は、内側の境界線を評価するためだけにあります。これを参照する疑似要素を配置するため、相対位置が必要です。

 .subnavborder {
       position:relative;

        border:1px solid black;
    }

内側の境界線がリストの装飾と競合する可能性があるため、（自由に）マージンを適用します

    .subnavborder li{
       margin:10px;
    }

今、疑似要素

.subnavborder:after {
    border: 2px solid #ff0000;
    border-radius:6px;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

それを得る？。ゴースト要素を追加しています。ピクセルや色などの深さを変更しますこの内部フィドルで動作することを確認してください

半径は必要ありませんか？ 疑似要素を使用したくない場合は、プロパティのアウトラインを使用した解決策があります（ただし、半径は使用しません...）必要な場合は、それを要求してください。ここに含めます。

于 2013-02-28T16:38:56.800 に答える
0

HTML5について話している場合は、CSS3についても話していることになります。これbox-shadowは、一般的にサポートされていることを意味します。

box-shadowオフセットをサポートします。これにより、境界を越えて背景を継続しているように見せることができます。

これを試してみてください：

ul.subMenu {
    background-color: #93b9bb;
    border: 5px solid #fff

    /* Your other styles here */

    -moz-box-shadow: 0px 0px 0px 10px #93b9bb;
    -webkit-box-shadow: 0px 0px 0px 10px #93b9bb;
    -o-box-shadow: 0px 0px 0px 10px #93b9bb;
    box-shadow: 0px 0px 0px 10px #93b9bb;
}

JSFiddleを見てください。

:beforeこれは、CSSをよりクリーンにする、または:after疑似要素ハックを使用しないだけでなく、ボックスの影をより簡単に制御できるという事実（noposition: absoluteやleft right、などの値）もありません。上記のbox-shadowプロパティの4番目のピクセル値は、シャドウオフセットを定義します。前は0px0pxのぼかし、つまり完全に鋭い影を指定します。

于 2013-02-28T16:35:30.323 に答える