Question

我有一个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之类的东西不存在。

Answer 1

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;
}

来源：Bottom to top <ul> element arrangement

Answer 2

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;
    };  
});

Answer 3

您需要使用javascript。如果一条线长于你的最大值，你可以将它分开，以尽可能长时间地增长下线，同时保持低于最大值;但是很棘手 - 我建议你检查这项努力是否值得获得。

从下到上渲染<ul>元素</up>

3 个答案: