CSS float 将带有换行文本的 div 折叠到所需的最小值

示例图片：

And the 代码位于 JSBIN http://jsbin.com/ucamOW/1/.

情况是，我正在尝试创建一个带有标签的复选框列表，每个复选框旁边都有一个“信息图标”。

这个想法是，如果您单击标签，它将触发复选框（正如它应该的那样），然后我们使用 JS 触发一些操作。

信息图标是一个工具提示，您可以单击它来获取更多信息。因为信息图标有它自己的交互，所以我们不能将其内嵌在标签内，因为标签会触发复选框交互。

所以我想做的就是让信息图标尽可能靠近标签文本。我通过浮动所有剩下的标签来完成此操作，以便它们折叠到所需的大小。然后，我给标签设置最大宽度，以免将信息图标推到下一行。

问题：请注意，如果标签没有换行（第一个标签），则标签会折叠到仅与文本一样宽（绿色边框）。但是，一旦标签必须换行（每个其他示例），标签就会采用最大宽度尺寸。如果你去掉绿色边框，这看起来很有趣，因为信息图标现在看起来在视觉上漂浮在距文本任意且看似随机的距离处。

问题：有没有办法让浮动对象在文本换行时折叠到与文本一样宽，或者这就是 CSS 中的工作方式？

EDIT:

为了澄清一下，我希望上面的示例图像/代码最终生成如下所示的内容：

请注意，所有标签（绿色边框）都会折叠为仅与文本一样宽 - 即使在文本换行的标签上也是如此。

EDIT 2:

我想我理解这个问题...问题是文本换行只是因为存在最大宽度。换句话说，内容（文本）比最大宽度宽得多，因此如果没有明确说明，div 不可能折叠到特定宽度。

因此，我认为没有解决方案。 CSS 只是没有设置来处理这个问题。

我真的很想看到一个纯 CSS 解决方案。我已经设法用脚本解决了这个问题。

尝试这个工作小提琴 http://jsfiddle.net/avrahamcool/tvhCk/

HTML（这里没有任何改变）

CSS

ul, li
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul
{
  border: 1px solid red;
  width: 200px;
}

li
{
  margin: 10px 0;
}


li *
{
  vertical-align: top;
}

label
{
  border: 1px solid green;
  display: inline-block;
  max-width: 150px;
}

.infoIcon
{
  color: blue;
  display: inline-block;
}

JQuery:取自这个帖子 https://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(document).ready(function () {
    $("label").each(function ()
    {
        $(this).width($(this).textWidth() + 2);
    });
});