Question

关于在列表项之间插入分隔符之前或之后使用的水平无序列表。

我已经让自己不得不按照预定的时间间隔检查列表中的孩子是否已经闯入另一行，并且有点满意，至少列表看起来是对的在我的调整点。

然而，当我的客户想要更改任何给定孩子的内容时出现问题，

一些短视的解决方案。相当繁琐的工作：\当决定切换到不同的分隔符号时问题进一步复杂化，因为包含其中一个列表的每个页面都嵌入了自定义CSS，也需要更改。长话短说，我几乎放弃了试图保持清洁。

修改

要明确的是，问题是CSS中没有明确的方法（我知道）检测列表中的换行符。如果您在列表项之间插入分隔符，并且列表中断为新行，则您将在第一行的最后一项中留下，并在末尾悬挂分隔符。不雅观。我之前能够解决的唯一方法是使用CSS中的调整点，但这不是一个理想的修复方法，因为如果列表发生了变化，你必须返回并重新检查调整分。

EDIT2：

附加图片以帮助澄清意图

Answer 1

我今天想出了一个我非常满意的解决方案，所以我想我为了后人的缘故分享它，以防其他人也有遇到类似的问题。我也对其他人可能提出的解决方案非常感兴趣，特别是如果解决方案仅限CSS。

CSS：

.classname {
    padding-left:0;
}
.classname.centered {
    text-align:center;
}
.classname.left {
    text-align:left;
}
.classname li {
    display:inline;
    margin:0;
    padding:0;
    white-space: nowrap;    
}
.classname li:not(.last-on-line):not(:last-of-type):after {
    content:"|";
    margin:0 0.25em 0 0.45em;
}

.classname.centered li:first-of-type,
.classname.centered li.first-on-line {
    padding-left:0.8875em;
}

.classname.centered li:last-of-type,
.classname.centered li.last-on-line,
.classname.left li:last-of-type,
.classname.left li.last-on-line {
    padding-right:0.8875em;
}

JS：

function determineListLineBreak() {
    //..
    var matchingDisplayTypes = ['inline','inline-block'];
    //..
    $('ul').each(function() {
        //..
        var listParent = this;
        //..
        if ($(this).hasClass('classname') == true && $(this).find('li').length > 1) {
            //..
            if ($.inArray($(this).find('li').css('display'), matchingDisplayTypes) > -1) {
                //..
                var listItems = $(this).find('li'),
                    listItemCount = $(this).find('li').length,
                    listItemLoopCount = 0;
                //..
                $(listItems).each(function() {
                    //..
                    listItemLoopCount = listItemLoopCount + 1;
                    //..
                    $(this).removeClass('first-on-line').removeClass('last-on-line');
                    //..
                    if (listItemLoopCount == listItemCount) {
                        //..
                        $(listItems).each(function() {
                            //..                    
                            var listItem = this;
                            //..
                            var itemToCompare,
                                compareDirection;
                            //..
                            if ($(listItem).next().length) {                        
                                itemToCompare = $(listItem).next(),
                                compareDirection = 'next';
                            }
                            else {
                                itemToCompare = $(listItem).prev(),
                                compareDirection = 'prev';
                            }
                            //..
                            if ($(listItem).offset().top != $(itemToCompare).offset().top) {
                                //..
                                if (compareDirection == 'next') {
                                    $(listItem).addClass('last-on-line');
                                    $(itemToCompare).addClass('first-on-line');
                                }
                                else {
                                    $(listItem).addClass('first-on-line');
                                    $(itemToCompare).addClass('last-on-line');
                                }
                            }
                        });
                    }
                });
            }
        }
    });
}

$(document).ready(function() {
    determineListLineBreak();
});

$(window).resize(function() {
    setTimeout(determineListLineBreak, 0)
});

HTML：

<ul class="classname left">
    <li>This is a list item</li>
    <li>This is another list item</li>
    <li>An item?</li>
    <li>Yes.</li>
    <li>Are we done?</li>
    <li>This is getting boring</li>
</ul>
<ul class="classname centered">
    <li>This is a list item</li>
    <li>This is another list item</li>
    <li>An item?</li>
    <li>Yes.</li>
    <li>Are we done?</li>
    <li>This is getting boring</li>
</ul>

有需要者的说明：

我所做的只是测量每个列表项到页面顶部的距离，然后比较列表项和它前面的列表项的度量。如果距离不同，它会在换行符之前向列表项添加一个类（我还包括在启动新行的列表项中添加一个类，对于那些可能需要它的人）。 CSS负责其余部分。

感谢阅读，希望这能帮到你！

修改

所以我发现，当你接近断线时，你有时会看到边缘上的项目占据了两个类，其中的项目应该不再是＃34;最后一个类＆＃34;同样。我认为这与分频器占用的空间有关，＃34;消失＆＃34;，允许进入下一行的东西回来＆＃34; up＆＃34;。

我现在采用的解决方法似乎有点多了。我觉得这应该更容易，我只是错过了它。我第一次检查它时没有足够的注意力（没有足够慢的调整大小），但是现在添加的JS / CSS似乎已经接近完美了。如果我真的尝试，我仍然可以打破它，所以我可以使用一些帮助，或者如果有人有更好的解决方案，我会很感激。

<强> EDIT2：

所以，事实证明这也可以打破，我必须继续努力。如果你不挑剔，这会让你接近。对我来说现在已经够好了

<强> EDIT3：

我已经对代码进行了更多编辑，修改了一些内容并包含左对齐方向。

<强>小提琴 http://jsfiddle.net/u5uzg02w/

检测无序列表中的换行符

1 个答案: