0

抱歉，我在 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.html 扩展名对结果进行了一些样式设置。问题是在 Firefox 和 chrome 中一切正常，因为自动完成在创建时设置为正确的宽度。在 IE 中不会发生这种情况（宽度太小），因此文本会换行。我希望找到一个简单的纯 css 解决方案，而无需在 jQuery 中摆弄。

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-block和width: 200px，width: auto这应该可以解决问题。

于 2012-10-03T09:35:41.403 回答