<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>...</li>
<li>8</li>
<li>9</li>
</ul>
というリストを、
7 4 1
8 5 2
9 6 3
という風に並べたいのですが、
どのようにすれば上手くいくでしょうか。
3つずつdivでくくって並べるというのでなく、あくまで
li要素を上記のように並べたいのですが、うまいやり方が思いつかず……。
もし、同じようなことをしているサイトなどがあれば、
そちらも教えていただければ嬉しいです。
みんなの回答 12 件
topとかleftとか指定して無理やり並べるくらいしか思いつかないかな。あとはJavascriptとか。
何でそんな捻くれた並び順に固執するのか分からんですが。
まったく試してないけど、こういう縦書きライブラリで実現できるんかな？知らんけど。
JavaScriptを使った縦書きライブラリ「竹取 JS」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたIT...
http://www.moongift.jp/2010/07/taketori-js/tableタグを使わない理由がわからない
やっぱりposition: absolute; ですかね〜
float:rightとnth-childとネガティブマージン。3はだめ？対応環境は？
tableでやらないってことは恐らく動的に吐かせるとかそういうことなんだろうけど、情報が足りなすぎるでしょ。対応環境とかliの高さ幅は固定なのか否かとかliが9つなのは例なのか実際そうなのかとか。
動的に何かしたいのかな?
テーブルを使わない厨だな。わりと居る。
liの幅、高さ固定で、かつcss3つかえるなら(ブラウザチェックしてないけど)
ul li:nth-child(1),ul li:nth-child(2),
ul li:nth-child(3) { margin : 0 0 0 auto; }
ul li:nth-child(4) { margin : -100% auto 0 auto; }
ul li:nth-child(5),
ul li:nth-child(6) { margin : 0 auto 0 auto; }
ul li:nth-child(7) { margin : -100% auto 0 0; }
ul li:nth-child(8),
ul li:nth-child(9) { margin : 0 auto 0 0; }
そもそもHTMLの構文上正しくない表現の仕方だよね。何がしたいんだ？
もう本当にどうしてもそうしなければならないなんらかの理由があるならテーブルで組んでrole="presentation"だね。
js使ったほうがはやい。
for文で回して、縦の列が3以上になったら、yの値をクリアして、xを左にプラスするやり方でいける。
プログラムにおけるごく普通の整列するための処理。
関連するトピックス