1

CSS を使用してコーディングされたhttp://www.mrc-productivity.com/forum/cssdropdown.htmlのようなドロップダウン メニューがあります。

今、私はほとんど問題を抱えていません.4つのメニュー項目があり、親divの合計幅を4つのメニュー項目のそれぞれで常に均等に分割したいとしましょう.異なる解像度でも...

現在、各アイテムの幅を手動で 200px に設定していますが、解像度が異なると台無しになるため、動的な単位ではありません。

それを行う方法はありますか？

4

3 に答える 3

1

最終的にいくつになるかわからない場合は、次のliトリックを使用できます。

li:nth-child(1):nth-last-child(1)      {width: 100%;}
li:nth-child(1):nth-last-child(2),
li:nth-child(1):nth-last-child(2)~ li  {width: 50%;}
li:nth-child(1):nth-last-child(3),
li:nth-child(1):nth-last-child(3)~ li  {width: 33.3333%;}
li:nth-child(1):nth-last-child(4),
li:nth-child(1):nth-last-child(4)~ li  {width: 25%;}
li:nth-child(1):nth-last-child(5),
li:nth-child(1):nth-last-child(5)~ li  {width: 20%;}

より大きな数に対してそれがどのように続くかがわかります...

これは思い出せないブログから盗んだものです。これは、私がこれまでに見た中で最も賢いアプローチです。

それは私がCSSについてほとんど知らないことを示しています:)

于 2013-03-15T22:33:30.027 に答える
1

正確な数のアイテムが同じ幅になることがわかっている場合は、パーセンテージを使用する必要があります。4 つのアイテムの場合、任意の幅の親 div で、アイテムの幅を 25% に設定します。

ボーダーまたはパディング/マージンで 100% を超えないようにするにはbox-sizing: border-box;、div を設定して、それらの余分なピクセルが幅に含まれるようにすることをお勧めします。

于 2013-03-15T21:12:46.200 に答える
0

まあ、ジョンは私を打ち負かしましたが、あなたが具体的に4つの要素を言ったので、私もパーセンテージに行きました. また、li アイテムが inline-table に設定されていることを確認してください。

http://jsfiddle.net/Lw7Ca/1/

div {
    margin: 50px;
    width: 100%;
    background-color: #f99;
}

ul {
    width: 100%;
}

ul li {
    height: 50px;
    width: 20%;
    display: inline-table;
    border: 1px solid black;
    padding: 10px;
}
于 2013-03-15T21:34:14.363 に答える