8

CSSのみのドロップダウンメニューを作りました。要件は、それぞれが垂直メニューをドロップダウンできる項目の水平バーを持つことでした。さらに、これらの項目は第 3 のメニューをドロップするのではなく、箇条書きのリストを表示するだけにする必要があります。私のhtmlには3つのネストがulあり、メニューは最新のすべてのブラウザで完全に機能しています. 次のようになります。

オリジナル

ただし、リンクの後ろの暗いボックスが箇条書きの右から始まり、メニュー幅全体に広がっていないのが気に入らなかったので、少し遊んで、最終的にこの調整にたどり着きました:

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

箇条書きのメニュー項目は、私が望んでいたように見えます。

働く

また、フォント サイズに対する being の性質上em、フォント サイズとは無関係に機能します。大きなフォント サイズで示されているように、次のようになります。

動作中 (大きいフォント)

これを Internet Explorer 8+9+10 (開発者プレビュー)、Firefox 3+7、最新の Chrome、Opera、および Safari でテストしたところ、魅力的に動作します。

ただし、正確に1.8emで機能する理由がわかりません。すべてのブラウザが箇条書き項目を正確にここまでインデントするのはなぜですか? このトピックについてインターネットを検索しましたが、役立つものは何も見つかりませんでした。これが将来のブラウザで動作することを確認できますか? それらの 1.8em は HTML 標準で指定されていますか?

ヒントを事前にありがとう！

編集：

DisgruntledGoatの回答: 1em/-1em または 20px/-20px を使用すると機能しません。このスタイルで:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

さまざまなフォントサイズでこれを取得します（明らかにフォントサイズでスケーリングしません）。

ピクセルベース

同様に、1em/-1em もオフで、上の図の右側のように見えますが、フォント サイズに合わせてスケーリングされます。なんらかの理由で1.8emが魔法の距離のように見えます...

4

4 に答える 4

5

長年の一貫性のないブラウザに基づいています-一貫性があるとは信じられないでしょう。最善のオプションは、自分で強制的に制御することです。

のパディング左とマージン左を同時に設定することで、これを使用できますli。例えば：

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

どうやらいくつかの（主に古い）ブラウザはパディングとマージンを使用しているので、必ず両方を設定してください。

于 2011-11-09T18:12:03.897 に答える
4

必ずCSSリセットを実行してから、必要な方法でプロパティを設定する必要があります。ブラウザの一貫性を決して信用しないでください。それは少しのコーディングを追加しますが、同時に将来的にあなたのコードを保証します。

于 2011-11-09T19:05:31.853 に答える
4

コードを考えると、ulマージンやパディングがないように設定しました。liただし、次のようにを設定しましたmargin-left: 1.8em。

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

そして、そこにあります。

于 2011-11-10T15:00:30.040 に答える
2

質問とコメントに答えるには、まったく同じサイズのマージンでパディングを無効にするため、ソリューションが機能します。ただし、リストの左側の間隔は、フォント サイズが大きいほど大きくなります。1em パディングと -1em マージン、または 20px と -20px で同じ結果が得られます。

コメントで述べたように、リストの実際のデフォルトのパディングは 40px です。事態をさらに混乱させるために、ユーザー エージェント スタイルシートをチェックすると (Chrome Dev Tool と Firefox の Firebug で)、一意の CSS プロパティ:-webkit-padding-startまたは-moz-padding-startそれぞれが報告されます。

これらの特別なプロパティは、リストが HTML の特殊なケースであるため、通常のパディングの代わりに使用されると想定しています。

于 2011-11-10T13:24:48.257 に答える