スタイルシートの事で？

質問

カテゴリが違うかもしれませんがお願いします。

下記のタグを表示させると
<ul>
<li><a href="http://1.com/" target="_blank">テスト１</a></li>
<li><a href="http://12.com/" target="_blank">テスト２</a></li>
<li><a href="http://123.com/" target="_blank">テスト３</a></li>
<li><a href="http://1234.com/" target="_blank">テスト４</a></li>
<li><a href="http://12345.com/" target="_blank">テスト５</a></li>
<li><a href="http://123456.com/" target="_blank">テスト６</a></li>
</ul>

　・テスト１
　・テスト２
　・テスト３
　・テスト４
　・テスト５
　・テスト６

このように表示されますが、スタイルシートを使って下記のように中央で折り返して表示させるにはどうすればいいでしょうか？

　・テスト１　・テスト４
　・テスト２　・テスト５
　・テスト３　・テスト６

よろしくお願いします。

回答No.5

qualheart

あんまりやり方は違わないですねｗ
例のサイトでは、スタイルシートで
.site-box ul li {～}
のように、直接liにクラス名を付ける方法ではなく
「site-boxクラスが定義されたタグの中にあるulおよびliに適用」という形で書かれているだけです。
そこが違うだけで、やっていることはわたしが例に書いたものと大差ありません。

まあ、そのようにliに直接クラス名を指定せずにやりたいのであれば、例のサイトのスタイルシートを引用すると、

<style>
.list-box {
width: 300px;
}
.list-box ul li {
width: 100px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 5px;
margin-right: 5px;
font-size:12px;
line-height:130%;
float:left;
margin-right: 0px;
}
</style>
<div class="list-box">
<ul>
<li><a href="http://1.com/" target="_blank">テスト１</a></li>
<li><a href="http://12.com/" target="_blank">テスト２</a></li>
<li><a href="http://123.com/" target="_blank">テスト３</a></li>
<li><a href="http://1234.com/" target="_blank">テスト４</a></li>
<li><a href="http://12345.com/" target="_blank">テスト５</a></li>
<li><a href="http://123456.com/" target="_blank">テスト６</a></li>
</ul>
</div>

のようになりますね。
ただし、例のサイトを見てわかるとおり、
　・テスト１　・テスト４
　・テスト２　・テスト５
　・テスト３　・テスト６
ではなく
　・テスト１　・テスト２
　・テスト３　・テスト４
　・テスト５　・テスト６
になってます。
目的とちょっと違うと思いますよ。

　・テスト１　・テスト４
　・テスト２　・テスト５
　・テスト３　・テスト６
にしたいのであればやはり、前にわたしが書いた例にする必要があると思います。

回答No.4

SAYKA

>この方法を教えて
li を display:inline か float:left かな。
ただ、上位の要素(ulとか)でwidthを固定しておかないと表示できる最大の要素に合わせてずーーっと横に連なっちゃうから注意かな。
li だけで指定すると他のもそうなっちゃうから他にもliが使われてる場所があるようなら上位の要素にID指定するなりで工夫したら良いよ。

具体的なソースは　ここの約束なので載せてあげられないからやりかただけ書いてみた。

回答No.3

qualheart

ANo.1です。
いちおう表示上はご要望の通りになってるとは思うんですけど・・・

＞<li class="left">
＞<li class="right">
＞を使わない方法でやりたいのです。

とありますが、これスタイルシートによる方法ですけど、他の方法が良いって事ですか？
どんな方法を想定しているのでしょう・・・？
差し支えなければ教えてくださいｗ

補足

例えるとするなら以下の方のページのような感じです。
http://jobhunting.searchnavi.jp/sitemap.html

ソースを見てみると
<div class="sitemap-box"><ul>
<li><a href="index.html">転職活動での面接時のチェックポイント</a></li>
<li><a href="contents/entry6osxar.html">面接後から就職内定まで</a></li>
<li><a href="contents/contents6.html">高校生の就職ガイダンス</a></li>
<li><a href="contents/contents5.html">就職ガイダンスと就職セミナー</a></li>
<li><a href="contents/contents4.html">就職ガイダンスとは</a></li>
<li><a href="contents/contents3.html">転職の面接時の条件確認</a></li>
<li><a href="contents/contents2.html">転職の面接を受ける際の注意点</a></li>
</ul></div>

このようにありますが、2列に表示されていますよね。
こんな感じにしたいです。

回答No.2

SAYKA

その表示は無理だね。(CSS3のマルチカラムが実装されないとできない)

１２
３４
５６

みたいな並びはできるけど希望のような

１４
２５
３６

は現状ではどこかで特殊な変換をしないと
HTML側で1～6を並べただけでそうしたいというのを叶えられないね。
現状ではJavaScriptによって強引に並べる事だろうけど…

お礼

すいません。間違えました。

１２
３４
５６

この方法を教えてください。

よろしくお願いします。

補足

SAYKAさん
回答ありがとうございます。

そうなんですか？

それでは、

１４
２５
３６
を試してみたいので教えていただけないでしょうか？

よろしくお願いします！

回答No.1

qualheart

<style>
.left {
float: left;
clear: both;
}
.right {
margin-left:100px;
}
</style>

<ul>
<li class="left"><a href="?http://1.com/" target="_blank">テスト１</a></li>
<li class="left"><a href="?http://12.com/" target="_blank">テスト２</a></li>
<li class="left"><a href="?http://123.com/" target="_blank">テスト３</a></li>
<li class="right"><a href="?http://1234.com/" target="_blank">テスト４</a></li>
<li class="right"><a href="?http://12345.com/" target="_blank">テスト５</a></li>
<li class="right"><a href="?http://123456.com/" target="_blank">テスト６</a></li>
</ul>

で、どうですか？

補足

qualheartさん
回答ありがとうございます。
今、試してみましたが自分の思っているのと違います。

<li class="left">
<li class="right">

を使わない方法でやりたいのです。