画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。
とても困っています、どなたかご教示くださいますようお願いいたします。
<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}
#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#menu img {
padding-top:8px;
border:none;
}
#menu ul {
margin:0;
}
#menu ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
display:inline;
float:left;
}
<< HTML >>
<div id="header">
<div id="logo">
<img src="img/logo.gif" width="298" height="59" alt="ロゴ">
</div><!-- /#logo -->
<div id="menu">
<ul>
<li><img src="img/btn_A.gif" width="194" height="51"></li>
<li><img src="img/btn_B.gif" width="140" height="51"></li>
<li><img src="img/btn_C.gif" width="149" height="51"></li>
<li><img src="img/btn_D.gif" width="137" height="51"></li>
</ul>
</div><!-- /#menu -->
</div><!-- /#header -->
No.2ベストアンサー
- 回答日時:
リストの整形はぶらうざによって差があります。
ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで横に並べます。
この場合
「ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
という仕様--ルールのためli間にスペースができます。white-spaceに
normal,pre,nowrap,pre-wrap,pre-lineのいずれを指定しても・・
そのためHTMLを
<ul><li><img src="img/btn_A.gif" width="194" height="51"></li><li>
<img src="img/btn_B.gif" width="140" height="51"></li><li>
<img src="img/btn_C.gif" width="149" height="51"></li><li><img src="img/btn_D.gif" width="137" height="51"></li></ul>
とかくことになります。
なお、
#menue ul li{width:23%;position:relative;}
#menue ul li a{display:block;width:100%;height:100%;text-decoration:none;}
#menue ul li img{display:block;width:100%;height:100%;}
とすると、ウィンドウ幅に合わせて伸縮しますから、そもそもの悩みはなくなります。
この場合でも、
さらにリストの説明もありがとうございます。
最後、文章途切れちゃったみたいですが・・・
解決後もご丁寧に説明いただいたので、ベストアンサーに選ばせてもらいました。
No.1
- 回答日時:
#menu ul {
margin:0;
padding:0;
}
padding:0; の追加で横並びにはなります。
早速のご回答ありがとうございます。
この回答を見る前に自己解決してしまいました。
いままで、"画像に余白が入る"というワードで検索してましたが、
"listに余白が入る"というワードで検索するとヒットしました。
li の部分にあったmargin、padding、list-style-typeをulに移しました。
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display:inline;
float:left;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の横に文字をうまく配置で...
-
ボタンをセル内一杯に表示させ...
-
ポップアップウィンドウのサイ...
-
cssヘッダー画像の下に配置した...
-
XML画像データををHTMLで簡単に...
-
HTMLは、シングルクォートかダ...
-
画像をクリックして元に戻すには
-
ホームページ作成 画像を横に...
-
CSSで相対パス
-
画像と同じCSSデザインにしたい...
-
cssで、チェックボックスの画像...
-
htmlの文字が縦書きになる
-
「諸要素」とはどういう意味で...
-
中点「・」の改行について
-
番号付きリスト(<Ol><Li>・・...
-
htmlのolやulなどlistにtitleや...
-
<div id="container">の使いか...
-
widthやheightの数値に単位(px...
-
html の divとtable の役割
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
ポップアップウィンドウのサイ...
-
プルダウンの選択リストの中に...
-
htmlで画像を2個ずつ並べていき...
-
ホームページビルダーの画像サ...
-
XML画像データををHTMLで簡単に...
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
リンクを選択したときの青い枠...
-
レスポンシブ対応のHTML・CSS(...
-
footerの背景が切れて、背景画...
-
html+CSSのみで作るスライドショー
-
ホームページタグ打ち。サイズ...
-
画像の横に文字をうまく配置で...
-
水面の波紋
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
HTMLのIMAGEに。。
おすすめ情報