Обнаружение разрывов строк в неупорядоченном списке

Question

В отношении горизонтальных неупорядоченных списков, которые используют: до или: после вставки разделителей между элементами списка.

я смирился выборочной проверка с заранее заданными интервалами, были ли или нет дети списка сломаны в другую линию, и был несколько удовлетворено тем, что по крайней мере, список выглядел правильный в моих точках Tweak.

Бит недальновидного решения , однако, поскольку проблемы возникали, когда мой клиент хотел изменить содержание любого данного ребенка. Довольно утомительная работа: \ Проблема была еще более усугублена, когда было принято решение переключиться на другой символ разделителя, поскольку каждая страница, содержащая один из этих списков, имела встроенный CSS-код, который также необходимо было бы изменить. Короче говоря, я почти не сдался, пытаясь сохранить чистоту.

EDIT:

Чтобы было ясно, проблема в том, что нет никакого ясного пути в CSS (что я знаю) для обнаружения разрыва строки в списке. Если вы вставляете разделители между элементами списка, а список разбивается на новую строку, вы остаетесь с последним элементом в первой строке с разделителем на конце. Unsightly. Единственный другой способ, с которым я смог справиться раньше, - это настроить точки в 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 заботится обо всем остальном.

Спасибо за чтение, надеюсь, это вам поможет!

EDIT:

Так я узнал, что, как вы приблизитесь к ломке линии, вы иногда видите деталь на краю принимает на обоих классах, с элементом, который больше не должен быть последним, имеющим «последний класс». Я думаю, что это связано с пространством, которое занимает разделитель, «исчезает», позволяя перейти к следующей строке, чтобы вернуться «вверх».

Обходной путь, который я использую сейчас, кажется немного. Я чувствую, что это должно быть проще, и я просто пропустил его. Я не уделял достаточно пристального внимания в первый раз, когда я проверил его (не слишком медленно менялся), но теперь добавленный JS/CSS кажется почти идеальным. Я все равно могу сломать его, если я действительно попытаюсь, поэтому, чтобы я мог использовать какую-то помощь, или если у кого-то есть лучшее решение, я был бы признателен.

EDIT2:

Таким образом, оказывается, что это может быть разорван тоже, я буду продолжать работать над этим .. Это заставляет вас закрыть, если вы не супер разборчивы. достаточно для меня Хорошо сейчас

EDIT3:

Я редактировал код больше, чтобы исправить некоторые вещи и включить выравнивание по левому краю ориентации.

Fiddle http://jsfiddle.net/u5uzg02w/