2

高さ 500px の div を指定するとします。この div には、リスト (おそらく ol または ul) があり、左右、上下 (これは、li 要素の display:inline-block で行うことができます) を埋める代わりに、それを埋めたいと考えています。右から左、下から上。

右から左は float:right のようなもので li 要素でできると思いますが、下から上にするのはどうでしょうか?

結果の例 (elem1 は elem2 の前に埋められる、など):

-----------------------------------
[elem10][elem9][elem8][elem7][elem6]
[elem5][elem4][elem3][elem2][elem1]
-----------------------------------

（つまり、ブロックを互いに重ねて右にスライドさせるようなものです。）

考えすぎだといいのですが、実際にはこれを行う簡単な方法があります。

考えていただければ幸いです。

PS。私は ol の新しい 'reversed' 属性を HTML5 で見たことがありますが、それが役立つとしても、現在ブラウザーのサポートがほとんどないものは避けたいと思います。

4

6 に答える 6

2

リストを回転させてから、li を反対方向に回転させます。

HTMLは

<ul class="container">
<li class="inner">one</li>
....
</ul>

CSSは

.container {
    left: 46px;
    top: 100px;
    width: 400px;
    height: 400px;
    position: absolute;
    border: 1px solid black;
    background-color: lemonchiffon;
}

.inner {
    background-color: lightsalmon;
    font-size: 20px;
    margin: 20px;
    width: 80px;
    float: left;
}

.container:hover,
.container:hover li {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

デモでは、ホバーで効果を加えて、見栄えを良くしました。実際のコードには遷移がありません:-)

于 2013-03-21T16:53:21.423 に答える
2

WebKit でのみサポートされていますが、-webkit-writing-mode: horizontal-bt;動作しているようです: http://jsfiddle.net/zzXhp/

他のプレフィックス付きのプロパティがある場合があります。明らかに、それはあまりよくサポートされていません。

于 2013-03-20T18:59:34.837 に答える
0

右から左に何かを表示するには（通常はアラビア語のページ）、を使用する必要がありますdir tag。

dir="rtl"： 右から左へ

<ul id="myList" dir="rtl">
    <li>1st</li>
    <li>2nd</li>
    <li>3rd</li>
</ul>

これがJSFIDDLEです

すべての作業を行うためのシンプルなJavaScript。必須ではありませrtlん。

var list = document.getElementById("myList");
var i = list.childNodes.length;
while (i--)
  list.appendChild(list.childNodes[i]);

これがJSFIDDLEです

于 2013-03-20T18:29:25.510 に答える
0

私は@vals回答のより短い、フォーマットされていないバージョンを作成しました。クレジットは彼に行きます。

HTML:

<ul class="reverse">
   <li>one</li>
   ...
</ul>

CSS:

.reverse {
   position: absolute;
   list-style: none;
}

.reverse li {
   margin: 5px;
   float: left;
}

.reverse,
.reverse li {
   -webkit-transform: rotate(180deg);
}

JSFIDDLE

于 2015-10-13T08:24:41.553 に答える
0

以下は、下から上に塗りつぶし、右揃えにするためのソリューションです。

#mylist {
    position:absolute;
    top:58px;
    right:4%;
    height:40px;// height of max rows you might need - this allows two rows for me
    line-height:1;
    font-size:14px;
    margin:0;
    border: 1px dashed #38e800;
}
#mylist ul {
    position:absolute;
    bottom:0;
    right:0;
    overflow: hidden;
    vertical-align:bottom;
    list-style: none;
    text-align:right;
    margin:0 0 2px 0;
 }
#mylist li {
    display:inline-block;
    padding:0 0 0 18px;
}
于 2015-11-20T10:00:35.923 に答える
0

下から上に反転するには、次の CSS を使用します。

ul { 
    display: flex;
    flex-direction: column-reverse;
}

または、次の CSS を使用して右から左に反転します。

ul { 
    display: flex;
    flex-direction: row-reverse;
}
于 2017-08-24T09:38:19.050 に答える