当使用display：inline-block时，是否可以为每行中的最后一项提供一个类

Question

我没有看到任何答案，可能是因为它不可能，但我想我还是会问。

我有一个动态提供链接的菜单，因此链接数量不断变化。我将链接包含在固定宽度中，并使用display：inline-block将它们强制为行。我想给每一行中的最后一个链接一个独特的类。因此，如果在这种情况下甚至可能，还是需要一些脚本来确定行的中断？

    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li> 
     <li></li> 
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>

ul {width:300;}
li{display:inline-block;}

Answer 1

我很确定你的意思是因为inline-block允许每个项目（在这种情况下是li）包装在它的父元素中，你想要应用css / jquery到每一行的最后一次。使用简单的css / jquery选择器是不可能的。使用当前版本的CSS（CSS3）根本不可能。

使用jquery，您必须遍历每个项目，如果项目的顶部与下一个项目的顶部不匹配，则它是最后一个项目（以及最后一个项目）。但是，如果您的显示器是响应式的，那么您必须在屏幕调整大小时（最坏的情况下）执行该jquery方法。

JsFiddle.Net

HTML

<button>Go</button>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty</li>
    <li>Twenty One</li>
    <li>Twenty Two</li>
    <li>Twenty Three</li>
    <li>Twenty Four</li>
    <li>Twenty Five</li>
    <li>Twenty Six</li>
    <li>Twenty Seven</li>
    <li>Twenty Eight</li>
    <li>Twenty Nine</li>
    <li>Twenty Ten</li>
</ul>

CSS

ul li {display: inline-block;}
.last-li{ text-decoration: underline; }

的jQuery

$(document).ready(function() {
    $('button').on('click', function() {
        var $li = $('li');
        var top = $li.position().top;
        var $previous = null;

        $li.each(function() {
            var $this = $(this);
            if ($this.position().top != top)
            {
                top = $this.position().top;
                $previous.addClass('last-li');
            }
            $previous = $this;
        });

        $li.last().addClass('last-li');
    });
});

结果

注意

奇怪的CSS可能会使其无法按预期工作（边缘 - 顶部等），仅限FYI。