3

ドロップダウンメニューのマークアップを使用しています。

マークアップは次のとおりです。

<div class="select">
    <a href="#" class="anchor menu-active">
        <label>val1</label><span class="arrow"><label></label></span>
    </a>

    <div class="container menu-visible">
        <ul>
            <li>
                <a value="val1" class="item-selected">val1</a>
            </li>
            <li>
                <a value="val2333333333">val2333333333</a>
            </li>
        </ul>
    </div>
</div>

1 つ目aはメニュー項目をcontainer表し、div はサブメニュー項目のリストを表します。

  • サブメニュー項目は動的に生成されるため、幅は可変です。
  • アンカー内のテキストは太字になっているため、場合によっては、アンカーの幅がサブメニュー リストよりも大きくなることがあります。

私がしなければならないこと: と の両方の幅が同じcontainerでanchorなければなりません。サブメニューの幅がアンカーの幅より広い場合もあれば、その逆の場合もあります。さらに、幅は人為的に制限されるべきではなく、幅の広いコンテンツに合わせて拡張できるようにする必要がありanchorますcontainer。

これは私が遊んでいる CSS ですが、anchorを に合​​わせて展開するようには見えませんcontainer。

.container{
    position: absolute;
}

.anchor{
    font-weight: bold;
}

li{
    background: blue;
}

ul{
    display: inline-block;
}

.select{
    background: red;
    display: inline-block;
}

そしてフィドル：http://jsfiddle.net/MxdQS/

可能な場合はCSSのみでこれを行いたいので、javascriptソリューションは使用しないでください:)

そして、私が話していることをよりよく示す図: ここに画像の説明を入力

明確化: 幅の異なる 2 つのコンテナーがあり、1 つが絶対的に配置されている場合、短いコンテナーが常に長いコンテナーの幅に拡張されるように、それらを一致させるにはどうすればよいですか?

これをどのように行うことができるかについて誰かアドバイスできますか？

4

1 に答える 1

1

ここでデモをチェック

CSS

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}

アップデート

更新されたDEMOをチェック

于 2012-05-19T12:18:58.730 に答える