Question

抱歉，我在SO上找不到类似的答案。我有以下标记（由jquery ui自动完成生成，但这不是问题）

<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中的所有内容都正常工作，因为自动完成在创建时设置为正确的宽度。在IE中这不会发生（宽度太小）所以文本包装。我急于找到一个简单的css解决方案，而不是在jQuery中摆弄。

Answer 1

试试这个：

<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>

Answer 2

添加width:auto; display:inline-block

演示http://jsfiddle.net/fVr8P/4/

Answer 3

将display: block替换为display: inline-block，将width: 200px替换为width: auto，这应该可以解决问题。

样式ul宽度可容纳物品

3 个答案: