风格ul与宽度，以容纳项目

对不起，我没有找到类似的答案SO。我有以下的标记（由jQuery用户界面自动完成产生，但是这是不是这里的问题）风格ul与宽度，以容纳项目

<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用户界面自动完成未来的。我使用autocomplete.html扩展名对结果进行了一些修改。问题是，在Firefox中一切正常，因为自动完成在创建时被设置为正确的宽度。在IE中这不会发生（宽度太小），所以文字包装。我希望找到一个简单的CSS解决方案，而不用在jQuery中摆弄。

来源

2012-10-03 Tallmaris

就试试这个：

<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-03 09:57:55 Shivaji

这似乎是做的工作。我必须为“a”标签指定一个“高度”，否则悬停时的高光只会在实际线条上方成为一条窄线。这有点冒险，但它看起来像是最好的解决方案。将做一些进一步的跨浏览测试... :) – Tallmaris

这是一个适用于所有最新的浏览器 – Shivaji

接受，因为它指向了正确的方向。由于我无法控制ul样式（jquery UI在其中添加自己的东西），所以我不得不改变“a”样式以使其具有高度。 – Tallmaris

添加width:auto; display:inline-block

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

来源

2012-10-03 09:29:17 Sowmya

是的，这个作品......问题是，显示性能是由jQuery UI的改变（它只使用“块”和“无”）。任何其他想法？ – Tallmaris

你可以在jquery中使用内联块而不是块。检查示例演示在这里http://jsfiddle.net/YyU73/1/ – Sowmya

我做到了这一点，它适用于Chrome和Firefox，但不知道为什么IE浏览器不移动...即使我手动更改开发中的CSS控制台菜单只是不调整大小和文本保持包裹... – Tallmaris

更换display: block与display: inline-block和width: 200px与width: auto，是应该做的伎俩。

来源

2012-10-03 09:35:41 Zemljoradnik

风格ul与宽度，以容纳项目

回答

相关问题