電子書籍の厳選無料作品が豊富!

スタイルートでテクノラティーのようなタグ検索を作りたいのですが、リストの中身の文字がブロックに入りきらないと、文字全体が改行されてしまいます。
できれえば、文字の一部を前の行に残したいのですが、どのような指定をしたらよろしいのでしょうか?
-html
<div id="aa">
<ul>
<li><a href="#">aaaaa</a></li>
<li><a href="#">bbbbb</a></li>
<li><a href="#">bbbbb</a></li>
</ul>
</div>
-css
#aa {
width:100px;
height:auto;
}

##aa ul {
list-style:none;
}

##aa li {
flort:left;
}

大体こんな感じのソースです。

↓こんな感じになってしまいます。
aaaa bbbb
cccc

↓このような感じにしたいのですが・・・
aaaa bbbb cc
cc

よろしくお願いいたします。

A 回答 (4件)

タグ検索???タグクラウドのことでしょうか(

http://www.technorati.jp/tag/?hourly=1
それだったら#2のご回答にある通り、liタグへのdisplay:inline;でできるのではないでしょうか。

(タグクラウドには大抵ulを使われていますし、意味合い的にもリストに近いので、ulを使うので間違いはないと思います)
    • good
    • 0
この回答へのお礼

ありがとうございます。
早速やってみます。

お礼日時:2007/08/06 06:13

><ul>で囲う必要ってないんですか?


リストのように使っていないから どうしてリストを使っているのか疑問 と言っただけ。

実際 少し左を空けたいだけなら
こういう書き方でも充分役目を果たす

<div style="margin-left:2em">
<a></a><a></a><a></a>
</div>

ただ、アンカーによって区切られちゃってるから ブラウザがそれを1つのグループとして扱ってしまい、行をまたがらないようにしちゃってるのかもしれない。
どのブラウザでも希望の表示にするというのはちょっと難しいと思う。
    • good
    • 0
この回答へのお礼

ありがとうございます。
<ul>は、cssを切った時わかりやすいように
いれました。

ブラウザによっていろいろ解釈してくれえるので大変です。

お礼日時:2007/08/06 06:10

なんでulでくくってあるのかが判らないんだけど?(list-style:none だし)



あとその挙動はブラウザの仕様だから「英単語」についてはどうにもならないよ。
ためしに日本語にしてごらん。

<style><!--
#aa li {
//flort:left; //floatね
display:inline;
}
--></style>

<div id="aa">
<ul>
<li><a href="#">あああああ</a></li>
<li><a href="#">いいいいい</a></li>
<li><a href="#">ううううう</a></li>
</ul>
</div>
    • good
    • 0
この回答へのお礼

ありがとうございます。
floatまちがってました・・・

実際は日本語でやっているんですが、どうしてもだめなんです。

<ul>で囲う必要ってないんですか?

お礼日時:2007/08/03 18:15

IE限定であれば、word-breakを使った


word-break : break-all; の指定はどうですか?

##aa li {
flort:left;
word-break:break-all;
}

参考URL:http://www.tohoho-web.com/css/reference.htm#word …

この回答への補足

ありがとうございます。
IEだけでなく、他のブラウザでも同じような見た目にしたいのですが
何か他の手はありませんか?

補足日時:2007/08/03 18:15
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!