6

我有一个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不存在。

4

3 回答 3

2 
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> 元素排列

于 2012-09-27T14:00:28.140 回答
1

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;
    };  
});
于 2011-12-29T14:06:39.613 回答
0

您将需要使用 javascript。如果一条线比你的最大值长，你将它分割成尽可能长的下线，同时保持在你的最大值以下；虽然很棘手 - 我建议你检查一下努力是否真的值得。

于 2011-12-29T12:58:15.363 回答