html - すべてを作る
コンテナ内の要素
同じ幅の要素

Question

私はこれに1日ほど苦労していて、戻って正方形から数回始めましたが、水平方向のcssフライアウトヘッダーを希望どおりに機能させようとしています。

ドロップダウンビットは、コンテナがそれらに対応するように拡張されている間、必要なだけ広く拡張したいと思います（カテゴリ名が1行に強制された場合は素晴らしいでしょう）。フィドルはよりよく説明します。

何か案は？

score 0 · Accepted Answer

コンテナ内のすべての<li>要素を<ul>同じ幅にするには、次を追加します。

div#dropMenu ul.level2 li {width: 100px;}

score 0 · Accepted Answer

<li>コードを次のように変更して内の要素を埋めます<ul>が、コンテナのサイズを変更<ul>してを収容するために幅を広げません<li>。

.subCatodd{
    background-color:#7b631d;
    padding:10px 0;}
.subCateven {
    background-color:#665011;
    padding:10px 0;}

score 0 · Accepted Answer

width: 100%が原因でレイアウトを台無しにしているがいくつかありますpadding。 widthは要素の内側の幅なので、たとえばと組み合わせるwidth:100%と、padding:20px要素は 100% + 40px になります。

また、float: left存在しないはずのがいくつかあります。要素を垂直に積み重ねる場合は、する必要はありませんfloat: left。

ここでは非常に多くのことが行われているため、この css をテキストエディターにコピーして見やすくすることをお勧めします。いくつかの幅とフロートを削除しました

score 0 · Accepted Answer

これをチェックして

パディングを 100% 幅に追加し始めると、まさにそれが行われます。そのため、li オブジェクトが親をオーバーレイし始めます。それらは 100% ではありません。追加しているパディングの 110% cuz のようです。私は言っている...

px に基づいてパディングを追加し始める場合は、px で幅を定義する必要があります。% を使用すると、混乱するだけです。

html - すべてを作るコンテナ内の要素同じ幅の要素