liタグを改列させたい。

４番目のliタグは右の列に表示させたい。７番目のliタグはさらに右の列に表示させたい。
↓のような感じが希望です。ul liタグでは無理でしょうか？

１　４　７
２　５　８
３　６　９

No.5 回答者： ORUKA1951 回答日時： 2014/02/13 17:54

No.3です。

　回答者同士でやり取りしてはならないので、No.3の回答への補足です。
質問への疑問
　「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」---スタイルシートを解釈しないユーザーエージェントや検索エンジンも含めて---のですから、もし、それらが意味的に異なる３つのリストなのでしたら、そのようにマークアップすべきでしょう。
　また、順不同リスト(UL)--順番は関係ないリストでしたら、項目を並び替えればよいです。

　確かにColumnを使用する手法もありますが、ブラウザのサポートが追いついていません。(来年4月以降の状況を見てから)。その場合は、No.3で示したように
(1)----- (4)----- (8)----
(2)----- (5)----- (9)----
　 ----- (6)-----
(3)----- (7)-----
　とColumnを使用するとたとえリストが長くなっても対処は出来ます。

　単にボタンのように画像に置き換えて並べるのでしたら、絶対配置を使用する方法もあります。

　要は、HTMLの文書構造が分からないと適切なアドバイスは無理です。
　

No.4 回答者： taloo 回答日時： 2014/02/13 16:56

>No.2

>No.3

ということは、50音順に並べたナビゲーションメニューなどは、<ol>を使うべき、ということでしょうか。
それとも、デザインに合わせて<ul>を３つに作る方が良いという事でしょうか。

<ol>だとしても、

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ol>

と書いて、デザイン的に３段組みにするだけですので、
この方法は<ul>と<ol>が違うだけで、スタイルシートはNo.1に同じです。

ただ、私個人の考えとして、50音順でならべるとしてもナビゲーションなら<ul>だと思います。
実際、<ul>を使って50音順やカテゴリー順（<ul>の入れ子にする程でもないもの）を、column-countを使って縦の段組み表示にしています。


しかし、３段組み表示にしたいからと言って１つのナビゲーションを３つに分割するのは、私は間違った書き方だと思います。

質問文からは１つの<ul>または<ol>で作るべきか、３つの<ul>、<ol>にわけるべきかはわかりませんので、
まずは、構造を３つにわけるべきか、１つの構造にしてデザインで３段組みにすべきか、というのを考えてみてください。

No.3 回答者： tracer 回答日時： 2014/02/13 15:36

いろいろ方法はあるけど、問題はそのリストが何を表しているかだと思いますよ。

HTMLは論理構造なので、論理に矛盾が出てしまう方法はベストプラクティスではないですよね。

端的に回答するなら、1～3のリスト、4～6のリスト、7～8のリストを作って、その3つのulをfloatすればいいと思いますが、いずれにしても、1～3、4～6、7～9のそれぞれの情報の関係が何を示すかですよね。

No.2 回答者： ORUKA1951 回答日時： 2014/02/13 14:52

リスト項目でマークアップされる具体的な意味を教えてください。

リストの意味からして、
順不同リストでしたら
・----(1) ・----(2) ・----(3)
・----(4) ・----(5) ・----(6)
・----(7) ・----(8) ・----(9)
と横に 並んでも構わないはずです。
序列リストでしたら
(1)----- (4)----- (8)----
(2)----- (5)----- (9)----
　 ----- (6)-----
(3)----- (7)-----
とならなければなりませんね。

　全く同じでなくて良いですが、HTML自体のマークアップと、それをどのようにプレゼンテーションした以下を分けて説明してください。

No.1 回答者： taloo 回答日時： 2014/02/13 01:22

CSSのcolumn-countを使ってください。

http://www.htmq.com/css3/column-count.shtml

<div>と<p>を、それぞれ<ul>と<li>で考えれば構造は同じになります。