0

申し訳ありませんが、SOで同様の回答が見つかりませんでした。次のマークアップがあります (jquery ui autocomplete によって生成されますが、これはここでは問題ではありません)

<ul style="z-index: 1; display: block; border: thin solid red; width: 200px;">
<li>
<a>
  <div style="font-size: 0.85em;">
    <span style="float: right; padding-left: 10px; color: gray;">
      United Kingdom
    </span>
    <span style="">text text text text text</span>
  </div>
</a>
</li>
</ul>

このフィドルでわかるように: http://jsfiddle.net/fVr8P/2/幅が制限されており、国のスパンが「フローティング」であるため、テキストが折り返されます。全長に合わせて横幅を大きくしたいのですが、入れるwidth: auto;と100%まで伸びてしまいます。

バックグラウンド

もちろん、ulはjquery ui autocompleteから来ています。autocomplete.html 拡張機能を使用して、結果を少しスタイリングしています。問題は、作成時にオートコンプリートが正しい幅に設定されているため、Firefox と Chrome ですべてが正常に機能していることです。IE ではこれが起こらない (幅が小さすぎる) ため、テキストが折り返されます。jQueryをいじることなく、単純なcssのみのソリューションにたどり着きたいと思っています。

4

3 に答える 3

3

これを試してみてください：

<ul style="z-index: 1; border: thin solid red; list-style: none outside none; float: left;">

そして、スパンスタイルをこれに置き換えます：

<span style="float: left;">text text text text text</span>
于 2012-10-03T09:57:55.077 に答える
0

追加width:auto; display:inline-block

デモhttp://jsfiddle.net/fVr8P/4/

于 2012-10-03T09:29:17.763 に答える
0

とに置き換えdisplay: blockてください。これでうまくいくはずです。display: inline-blockwidth: 200pxwidth: auto

于 2012-10-03T09:35:41.403 に答える