6

ul可変要素数があります。li が幅が広すぎてリストを 1 行で処理できない場合、行が分割され、下の行で 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 />、先頭にタグを付ける 1 つのソリューションを次に示します。

デモ: 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 に答える