cssだけで縦書き的にliを並べる

質問

すみません、質問させてください。

<ul>
<li>1</li>
<li>2</li>
…
<li>10</li>
</ul>

を、

1 6
2 7
3 8
4 9
5 10

と、並べる方法はありますでしょうか？

ただし、liの数は1～10の間で変動し、
ulは常に親要素の中央に配置させたいです。

※liのwidthを100pxとした場合、
liの数が5以下の場合はulもwidthが100pxで親に中央配置、
liが6以上の場合はulのwidthが200pxになって親に中央配置。

cssだけで実装できる方法があればご教授ください。

回答No.1

ORUKA1951 · ベストアンサー

スタイルシートは、HTMLの属性を使用するより、はるかに多彩なプレゼンテーションの指定が容易です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より
　しかし、同時にHTMLの文書構造を変更することはできません。
『UAが木構造を変化させる訳ではない、ということに注意すること。( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/intro.html#processing-model )』

＞と、並べる方法はありますでしょうか？
　これは可能ですが!!!
＞※liのwidthを100pxとした場合、
＞liの数が5以下の場合はulもwidthが100pxで親に中央配置、
＞liが6以上の場合はulのwidthが200pxになって親に中央配置。
　これは出来ません。javascriptを併用するか、2列になるol要素にcolumns2のようなclass名を付けるしかないでしょう。
　【class名は数字から書き始めることが出来ない】
<div class="section">
＿<h2>見出し</h2>
＿<ol>
＿＿<li>あ</li>
＿＿<li>か</li>
＿＿<li>さ</li>
＿＿<li>た</li>
＿＿<li>な</li>
＿</ol>
＿<ol class="columns2">
＿＿<li>あ</li>
＿＿<li>か</li>
＿＿<li>さ</li>
＿＿<li>た</li>
＿＿<li>な</li>
＿＿<li>は</li>
＿＿<li>ま</li>
＿＿<li>や</li>
＿</ol>
</div>
div.section ol,div.section ol li{margin:0;padding:0;list-style-type:none;text-align:center;}
div.section ol{display:block;width:100px;margin:0 auto;}
div.section ol li{width:101px;float:left;background-color:yellow;}
div.section ol li+li+li+li+li+li{display:inline-block;float:none;width:99px;}
div.section ol:after{content:"";display:block;clear:left;}
div.section ol.columns2{width:200px;}

CSS3のMulti-column Layout モジュールを使用しても同様になるでしょう。

お礼

> javascriptを併用するか、2列になるol要素に
> columns2のようなclass名を付けるしかないでしょう。

ですよねー。。。

ソース側にできるだけif文入れたくなかったのですが、
liの個数渡す事にします。

li{width:101px;}
li+li+li+li+li+li{width:99px;}

の幅の差も、ちょっぴり気持ち悪いので、
ulの親要素の高さも固定されていることだし、
absoluteでガンガン固定させにかかります。。。

ご回答ありがとうございました。