0

私は現在、レスポンシブWebデザインのチュートリアルに取り組んでおり、ナビゲーションをチュートリアルとは異なるものにしたいと考えていました（ナビゲーションバーの背景を色付けし、中央に配置する必要があります。 bkgdで、左揃えでした）。

背景がないと、サブメニューが正しく表示されました。背景に色付きのバーを設定する作業をしているときに、色付きのバーを表示させる唯一の方法は、float:left;元々' .primary ul li{}'セレクターにあった''を削除することでした。これが削除されたので、サブメニューのあるアイテムである''にマウスをItem 4合わせると、サブメニューがアイテム4の真下ではなく、バーに合わせて左揃えで表示されます。ここで意味がわかります。

http://jsfiddle.net/mark_a_b/ytB66/1/

''を追加しfloat:left;直すと、ナビゲーションの背景色バーが消え、メニュー項目が希望どおりに中央に配置されなくなります（このバージョンのbkgdの色をダークグレーに設定しただけではありません）ここに示すように、メニュー項目を見ることができます）：

http://jsfiddle.net/mark_a_b/ytB66/3/

見落としているのはばかげていると思いますが、いじり回してどこにも行けなくなってしまったので、誰か他の人に手伝ってもらえるといいなと思っていました。提供された助けに感謝します！

ありがとう！！

4

2 に答える 2

2

サブメニューにポジショニングを追加するだけですleft: 0;-デモ

.primary ul ul{
    position: absolute;
    left: 0; /* this */
    z-index: 999;
    background-color: #ccc;
    height:0px;
    overflow: hidden;
    min-width: 100%;
}
于 2012-10-17T19:33:17.360 に答える
1

<ul>および<li>はブロックレベルの要素です。

通常<li>は垂直に配置されますが、ここではdisplay: inline;プロパティ値のために水平に表示されます。

<li>ここはすべて別のコンテナでもあり、インラインレベルの要素をブロックレベルの要素のコンテナとして<ul>使用するのは適切ではありません。

解決策は次のとおりです。display: inline-block;インラインレベルの表示スタイルとブロックレベルの動作を組み合わせたを使用します。

.primary ul li{
    display: inline-block;
    position: relative;
}
于 2012-10-17T19:33:31.777 に答える