无法正确对齐跨距

Question

这是我的页面：http://jsfiddle.net/5RKnQ/。如果将鼠标悬停在头像图像上，则会显示如下内容：

在jsfiddle上，宽度似乎被破坏，在我的浏览器上正常工作。无论如何，我想尽可能以最好的方式在盒子里面安排蓝色的跨度，使外部div适应它们的宽度，并尽可能节省空间。

Answer 1

它被破坏是因为你需要将外部链接放入jsfiddle，而不是：

<link rel="stylesheet" type="text/css" href="/css/mollio/main.css">

但

<link rel="stylesheet" type="text/css" href="http://www.[website].com/css/mollio/main.css">

您不仅可以使用max-width？

将“auto”放在外跨度的宽度上

我以为你无法在css中做你想做的事。如果是关于重新排序列表以获得更少的可用空间，那么您将需要使用javascript。

这是我的jsfiddle：http://jsfiddle.net/ayottepl/XLBha/

Answer 2

如果您将跨度浮动到内部，并将最小宽度/最大宽度应用于容器，那就足够了吗？

Answer 3

我似乎无法更新你的jsfiddle，jsfiddle今天有点乱，即使我能用它来编写这段代码。

（编辑 - 登录后工作）：http://jsfiddle.net/HQ6Py/

我不确定是否有CSS方法可以做你想要的，但这里有一些似乎有用的脚本。基本上，您检查每个跨度的实际最右侧位置并跟踪最大的位置，然后根据该宽度设置宽度。

请注意，div的最大大小受到“max-width：28％”的限制，这是在JSFiddle中搞乱的 - 从样式中删除它并用绝对像素值替换。

 $(".username").hoverIntent({
    over: function(e) {
        var minLeft, maxWidth = 0,
            list = $(this).find(".title_list");

        // start the fadeIn first otherwise the positions won't be available
        list.fadeIn(300);

        list.find('span').each(function() {
            var left = $(this).position().left,
                width = $(this).outerWidth() + left;

            if (maxWidth < width) {
                maxWidth = width;
            }
        });
        list.css("width", maxWidth);

    },
    out: function(e) {
        $(this).find(".title_list").fadeOut(300);
    },
    timeout: 3000
});