リストを一行にせずに横並びにする方法

質問

リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。
コメントを使わないで横並びにする方法はありますか？

■html
<ul><!--
--><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!--
--><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!--
--></ul>
■css
li { display: inline; }
↓のように<!---->をとっても表示を一行にする方法があれば教えてください。

<li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li>
<li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

回答No.5

jocole

ナビゲーションとかでコンテンツ幅ぴったりに画像を並べようとしても、
liとliの間にスペースが入り、コンテンツ幅を超えてしまうので、
改行されてしまうということでしょうか？
その場合は、ソースの見易さを優先すると、やはりコメントでスペースを消すか、
float:leftを使うしかないと思います。

回答No.4

MrYoYoYo

li の要素にinlineを指定したとしても、ulの要素はblockのままです。
まずは ulに対して、background: red;などと指定して、
横幅の領域の確認をしましょう。

すべてのliのwidthをたした合計以上のサイズに指定されていますか？

もし表示領域が小さい場合にはulに対して、適切なwidthの設定をしてあげてください。

回答No.3

CHI-512

こんにちは。
li { display: inline; }
が指定してあれば、
<li>～～</li>
<li>～～～</li>
というソースであっても、
<li>～～</li>
↑
100行改行
↓
<li>～～</li>
であっても、横並びになるはずですよ。

お礼

それがならなかったのです（涙）
改行タグを入れてなかったのですが…

回答No.2

kyanasaki

li {
margin:0px;
float:left;
}

これで出来ませんか？（動作未確認）

お礼

できました！
ありがとうございます。

回答No.1

noname#39970

聞きたい事がわからない
「ソース」を1行に？
「表示」を1行に？

とりあえず　こうとか
</li
><li

補足

質問がわかりにくくてすみません（汗）
<li>～</li><li>～</li><li>～</li>
ではなくて
<li>～</li>
<li>～</li>
<li>～</li>
かいてブラウザで見たときにdisplay:inlineが反映される方法が知りたいのです…。