リストの左右の余白を調整したい

質問

こんばんは

作成中サイトにて各ページへのリンクを
メニューボタンをつくり一列に配置しました
ですが
marginやpaddingをゼロにしても余白がついてしまい・・・

どうしたら解消できますか？

回答No.2

think49 · ベストアンサー

やはりHTMLとCSSがないと断定できませんが。

画像の幅が一定ではないように見えます。
もし、CSSが

li {
float:left;
width:200px;
}

のように幅固定で横流ししていて、
画像の幅が200pxだったり180pxだったりしたら余白が出来てしまいますね。

# 個人的にはナビゲーションは幅固定が直感的でわかりやすいと思います。

回答No.3

abril

<ul>
<li><img src="navi01.gif" alt="ナビ画像1" width="100" height="20">ナビ画像1</li>
<li><img src="navi01.gif" alt="ナビ画像2" width="100" height="20">ナビ画像2</li>
<li><img src="navi01.gif" alt="ナビ画像3" width="100" height="20">ナビ画像3</li>
</ul>

CSSでliに"display: inline;"を指定した状態で、HTMLでの記述を上記の様にli毎に改行した場合、環境によっては”改行コード”が入っている事で数ピクセルの空きができてしまう事があります。

対処方法としては、改行コードの部分をコメントで隠してしまう（改行コードそのものを削除してしまうとソースが見づらいので）、あるいはリストのアイテムを横並びにする方法を"display: inline;"ではなく"float: left;"にする、等があります。

上記はCSS、HTMLの具体的なソースがないので「こういう風にやっているのでは？」という推測に基づくものです。その部分のHTMLのソースとCSSを実際に見せてもらえれば確実な原因を突き止める事もできるかもしれませんが。

お礼

みなさん回答ありがとうございました。

Widthの修正でなんとか表示が解決しました。

回答No.1

darter

HTMLやCSSの内容がないと断定はできないのですが、
例えばテーブルの中に画像を入れたりした場合は、テーブルと画像の
両方のmargin,paddingを0にしないと余白がなしにはなりません。

もしfirefoxをお使いでしたら、firebugというアドオンを導入すると、
そこらへんのチェックが画面上でできて便利です。