CSS浮动以使包裹文本的div折叠到最小所需大小

Question

示例图片:

还有在JSBIN上的代码.

现在的情况是我正在尝试创建一个带有"信息图标"的复选框和标签列表。

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

信息图标是一个工具提示，您可以点击它以获取更多信息。因为信息图标有自己的交互，所以我们不能把它内联到标签中，因为标签会触发复选框交互。

所以我要做的就是让信息图标尽可能接近标签文本。我通过将所有标签向左浮动来实现这一点，这样它们就会缩小到所需的尺寸。然后我给标签设置了最大宽度，以便不会将信息图标推到下一行。

问题: 请注意，如果标签不换行（第一个），则标签只缩小为文本大小（绿色边框）。但是，一旦标签必须换行（其他示例），标签就会采用最大宽度大小。如果您去掉绿色边框，这看起来很有趣，因为信息图标现在似乎会在文本的任意和看起来随机的距离处浮动。

问题: 有没有办法让浮动对象在文本换行时只缩小为文本大小，或者这就是CSS中的工作方式？

编辑:

为了澄清，我希望上面的示例图像/代码最终产生像这样的东西:

请注意，所有标签（绿色边框）都缩小到与文本相同的大小，即使在文本换行的情况下也是如此。

编辑2:

我想我理解了问题……问题在于文本之所以换行仅是因为存在最大宽度。换句话说，内容（文本）比最大宽度要宽得多，因此如果没有明确指定它是不可能将div折叠到特定宽度的。

因此，我认为没有解决方案。CSS并未设置处理这种情况的方法。

- DA.

Answer 1

我希望能看到一个纯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: taken from this post

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

- avrahamcool

---

这个有趣的解决方案值得一试！它确实产生了我想要的结果。我有一种感觉，仅凭CSS无法完成这项任务。虽然为我们所做的事情编写脚本可能有些过度，但这绝对是一个有趣的解决方案！ - DA.

Answer 2

更改你以下的CSS属性:--

label {
float: left;
margin-left: 20px;
max-width: 150px;
min-width: 150px;
border: 1px solid green;
}

请查看JSBIN链接：http://jsbin.com/ucamOW/9

请告诉我，这是您想要的吗？

- N.P. SINGH

---

澄清一下，那与我上面的图片相同。我想要发生的是绿色边框会折叠到文本的宽度--而不是max-width的宽度。你会注意到它在只有一行文本时确实会折叠到文本的宽度，但如果文本换行，则宽度默认为max-width。 - DA.

感谢更好的解释，我已经更新了代码，请看一下，是否和你想要的一样？ - N.P. SINGH

不行，你的代码让它们都有相同的宽度。我想要完全相反的效果。每个标签应该只有文本那么宽。 - DA.

抱歉DA，但是在您提供的示例中，我发现绿色边框和标签文本之间没有空格，它们非常接近，就像您在所需输出图像中展示的那样。 - N.P. SINGH

第一张图片是我现在的代码。第二张图片是我想要的样子。 - DA.