CSS float可将包含包装文本的div折叠到所需的最小值

示例图像：

还有

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

这个想法是，如果你点击标签，它将触发复选框（它应该如此），然后我们用JS触发一些操作

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

所以我要做的是让信息图标尽可能靠近标签文本。我通过浮动所有留下的标签来实现这一点，这样它们就可以折叠到需要的大小。然后我给标签一个最大宽度，这样就不会把信息图标推到下一行

问题：请注意，如果标签没有包装（第一个），标签将折叠为仅与文本一样宽（绿色边框）。但是，一旦标签必须包裹（每隔一个示例），标签将采用最大宽度大小。如果去掉绿色边框，这看起来很有趣，因为信息图标现在看起来似乎在视觉上与文本保持任意且看似随机的距离

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

编辑：

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

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

编辑2：

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

---

因此，我认为没有解决办法。CSS并不是用来处理这个问题的

更改以下CSS属性：--

请参阅JSBIN：

---

让我知道你想要的是相同的吗？

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

试试这个

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:取自

$.fn.textWidth=函数（）{
var html_org=$（this.html（）；
var html_calc=''+html_org+''；
$（this）.html（html\u calc）；
var width=$（this.find（'span:first'）.width（）；
$（this.html（html_org）；
返回宽度；
};
$（文档）.ready（函数（）{
$（“标签”）。每个（函数（）
{
$（this）.width（$（this）.textWidth（）+2）；
});
});

澄清一下，这与我上面的图片相同。我想让绿色边框折叠到文本的宽度，而不是最大宽度的宽度。您会注意到它确实会折叠到文本的宽度，但仅当有一行文本时。如果文本换行，那么宽度默认为max-width。感谢更好的解释，我已经更新了代码，请看一下，是否与您想要的相同无。您的代码具有相同的宽度。我想要的正好相反。每个标签的宽度应与文本的宽度相同。抱歉，DA，但现在在您提供的示例中，我可以看到绿色边框和标签文本之间没有空格，它们足够近，正如您在所需的输出图像中所示。第一个图像是我的代码。第二张图是我想要的。这个有趣的解决方案+1！这确实产生了我所期待的结果。我有一种感觉，单靠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;
}

$.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);
    });
});