Отрисовка элементов ‹ul› снизу вверх

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

x - обозначает элемент списка

| - обозначает границы списка или что-то еще, что ограничивает ширину списка

|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered below
|xxxx     |

Мне нужно отображать элементы снизу вверх, чтобы я мог получить:

|xxxx     |
|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered above

Является ли это возможным?

Вот пример кода

<ul>
  <li>Some content</li>
  <li>Other content</li>
  <li>ContentContent</li>
  <li>Zawartość Contentu</li>
</ul>

В настоящее время он не содержит CSS. Я могу добавить все, что вы порекомендуете, чтобы отобразить его снизу вверх. Что-то вроде float:bottom, которого, к сожалению, не существует.


html css render direction html-lists
person S3Mi    schedule 29.12.2011    source источник
comment
Я предполагаю, что изменить способ автоматического разрыва строки невозможно. Но, может быть, вы могли бы добавить немного <br /> вручную?   -  person Armin    schedule 29.12.2011
comment
Затем мне нужно знать ширину каждого элемента, чтобы определить, когда разбить строку:/.   -  person S3Mi    schedule 29.12.2011
comment
Если вы можете использовать javascript, вы можете определить необходимую ширину.   -  person Armin    schedule 29.12.2011

Ответы (3)


arrow_upward
2
arrow_downward 

ul, ul li {
-webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
        transform: scaleY(-1);

}
ul {
    width: 350px;
}
 li {
    display: inline-block;
    width: 70px;
    zoom: 1;         
    *display: inline;
}

источник: расположение элементов ‹ul› снизу вверх

person bancer    schedule 27.09.2012

arrow_upward
1
arrow_downward

Направление текста снизу вверх не поддерживается в css (http://dev.w3.org/csswg/css3-writing-modes/#writing-mode1), поэтому для любого решения потребуется javascript или манипуляции на стороне сервера.

Вот одно из решений, использующее jQuery для ручного разделения длинных элементов на более мелкие строки с тегами <br /> в начале.

Демо: http://jsfiddle.net/FGk5R/2/

Код:

var LIST_WIDTH = 25; // Manually adjust this to change the width of your list to fit your container element
$('ul li').each(function(){
    var listitem = $(this).html();
    $(this).html(bottomToTop(listitem));

    function bottomToTop(item)
    {
       var length = item.length;
       var newhtml = '';

        if (length <= LIST_WIDTH)
        {
            return item;
        }
       while (length > 0)
       {          
            if (length <= LIST_WIDTH)
            {
                var newhtml = item.slice(-LIST_WIDTH) + newhtml;
            }
            else
            {
                var newhtml = '<br />' + item.slice(-LIST_WIDTH) + newhtml;
            }

            item = item.substr(0, (length - LIST_WIDTH));
            length = item.length;
        }
        return newhtml;
    };  
});
person Chris Fletcher    schedule 29.12.2011

arrow_upward
0
arrow_downward

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

person kontur    schedule 29.12.2011
comment
Я начал с этой идеи, но нет, это не стоит усилий:/ Итак, я начал искать какое-то решение CSS/HTML, и, насколько я читал, невозможно отобразить элементы страницы в порядке снизу вверх. - person S3Mi; 29.12.2011