0

このカスタム ドロップダウン メニューのスタイルを設定しようとしています

ただし、ドロップダウンする部分は、ドロップダウンの「見出し」部分よりも常にわずかに狭くなります (両側で 1 ピクセル)。

ここで幅を変えると、

.wrapper-dropdown-1 {
    position: relative;
    width: 200px;
    padding: 10px;
    margin: 0 auto;
}

何も起こらないようです。ドロップダウン部分がトップ部分と同じ幅になるように調整するにはどうすればよいですか? これはどこで制御されていますか？デモでは、幅が完全に揃っているように見えますが、スタイルを変更して影響を与える方法を理解できません。

jsbin

4

1 に答える 1

2

要素の 1 つに境界線を追加または削除していますか? 原因として考えられるのは、両側に 1 ピクセルの場合です。

境界線を一致させることができます/一致させる必要があります。または、クロスブラウザーの互換性を失っても問題ない場合は、box-sizingを使用できます。

box-sizing: padding-box (今のところベンダー接頭辞付き、例えば-webkit-box-sizing: padding-box)。

それを行う別の（ハッキーな）方法は、ドロップダウンのmargin-leftandmargin-rightをに設定する-1pxか、同等に、JSBinからleft/rightをに変更すること-1pxです：

.wrapper-dropdown-1 .dropdown {
     /* Size & position */
     position: absolute;
     top: 100%;
     left: -1px;
     right: -1px;

      /* ... */

}

于 2013-01-30T21:37:57.440 に答える