4

示例图片：

在此处输入图像描述

还有JSBIN 的代码。

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

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

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

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

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

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

编辑：

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

在此处输入图像描述

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

编辑2：

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

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

4

2 回答 2

3

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

试试这个Workinf Fiddle

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 = 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);
    });
});
于 2013-09-23T20:50:20.093 回答
-1

更改以下 CSS 属性：--

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

请参阅 JSBIN：- http://jsbin.com/ucamOW/9

让我知道你想要的一样吗？

于 2013-09-23T18:28:49.527 回答