2

次のマークアップを使用します。

<div style="overflow: auto">
    <select multiple="true" style="min-width: 300px;">
        <option>a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string</option>
    </select>
</div>

min-width を指定すると、選択幅がコンテナーの 100% になります。つまり、オーバーフローしません。最小幅を削除すると、オーバーフローします (これは望ましい動作ですが、オプションがなくてもボックスが適切に見えるように最小幅も必要です)。

これはどのように達成できますか？min-width が max-width に影響するという事実は、私を悩ませます。私はcssソリューションにのみ興味があり、javascriptを避けていることに注意してください。

編集: 明確にするために、スタイリングにより、次のマークアップが幅 300px の空のボックスをレンダリングする必要があります。

<div>
    <select multiple="true">
    </select>
</div>

以下は、コンテナと同じ幅のボックスをレンダリングし、スクロールバーで残りを表示できるようにします。

<div>
    <select multiple="true">
        <option>a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string</option>
    </select>
</div>
4

2 に答える 2

2

私は解決策を見つけようとしましたが、定義された最小幅を持つ選択要素の幅を設定することになると、css はかなり頑固なようです。

ただし、JS/JQuery で簡単な回避策を作成しましたが、私の JSfiddle ではうまく機能しているようです: http://jsfiddle.net/RHfm4/2/

var v = $("select");
  for(var i = 0; i < v.length; i++){
    if(parseInt($(v[i]).css("width")) < 300){
      $(v[i]).css("width", "300px");
  }
}​​​​​​​

これにより、必要な機能が得られますが、回避策にすぎません。これが多少役立つことを願っています。

于 2012-06-21T23:05:31.350 に答える
0

うまくいけば、それはあなたを助けます...

<div style="min-width:300px; overflow-x: auto">
  <select multiple="true" style="width: auto;">
    <option>a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string</option>
    <option>a long string</option>
    <option>a long string</option>
    <option>a long string</option>                                    
  </select>
</div>
于 2012-06-21T13:45:43.857 に答える