- ベストアンサー
隙間をなくすには？
タブメニュー式のＨＰをつくろうと思っています。 一番上にタブの画像を横一列に並べて、そのすぐ下にコンテンツを書くためのテーブル（？）を配置したいと思っています。 タブ画像を横に並べて、その下にテーブルを配置するまではうまくいったのですが、タブとテーブルに間に隙間があいてしまってどうしてもくっつけることができません。 下記がHTMLとCSSのソースなのですが、タブとテーブルをくっつけるにはどうしたらいいのでしょうか？ HTMLここから ----------------------------------------------------------------- <Html> <Head> <Title></Title> <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css"> </Head> <Body> <div> <ul> <li><Img Src="tab1-1.jpg"></li> <li><Img Src="tab2-1.jpg"></li> <li><Img Src="tab3-1.jpg"></li> <li><Img Src="tab4-1.jpg"></li> </ul> </div> <div class="box1">ここに内容を入れます。</div> </Body> </Html> CSSここから ----------------------------------------------------------- li {float:left;} .box1 { clear:both; border-top:solid 10px #ff3300; border-bottom:solid 1px #ff3300; border-left:solid 1px #ff3300; border-right:solid 1px #ff3300; } ul {margin:-0px;}
- OKIaHUKUOKA
- お礼率28% (69/241)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
リストを使わないでこんな風にしたらどうでしょう <div> <Img Src="tab1-1.jpg"> <Img Src="tab2-1.jpg"> <Img Src="tab3-1.jpg"> <Img Src="tab4-1.jpg"> </div> わかりやすいように行を分けて書いていますが、画像の間に半角スペースが表示される場合は<div>～</div>を１行に記述してください
その他の回答 (3)
- ao_
- ベストアンサー率33% (15/45)
余白に関しては#2さんと#3さんの回答で解決できると思います。 気になったのは私は<ul></ul>の間には改行を付けない方がいいと本で読んだことがありました。 また、リストをdivで括っていますが、idもclassも付けないならなくてもいいタグかも知れません。CSSを全て見ないとわかりませんが。
- quads
- ベストアンサー率35% (90/257)
> タブメニュー式のＨＰをつくろうと思っています。 私の知識不足だと思うのですが、どのようにされたいのかが分かりませんでした…。 とりあえず、リスト内の画像とボックスの間に余白が出来なければ良いのでしょうか。 指定し得るポイントを箇条書き。 ●ul要素の余白を無くす。 ⇒margin及びpaddingで0を指定。 ●フロート化せず、代わりにインライン化。 ⇒li要素にdisplay:inlineを指定。 ●li要素間に空白類文字を含ませない。 ⇒#2さんの通りです。それぞれの間だけでなく、下部にも影響が出ます。 ※ソースを見やすくしたいのであれば<!-- -->を利用したり。 ●img要素にvertical-align:text-bottomを指定。 ⇒下端を揃えます。ブラウザの解釈によっては指定しないと余白が作られてしまいます。 そんな感じで出来る気がします。 補足ですが、li要素をそのまま（display:list-item）で利用するのであれば、list-style-typeに注意しないとデザインが崩れてしまう可能性があります。 というか、マーカーが画像と重なっています。 2行目の通りで完成形が分からないのですが、リストを使う必要性が無ければ、#1さんの通りな気もします。
- coder
- ベストアンサー率50% (3/6)
えっと li {float:left;}ではなく、li{display:inline;}にすると解決するようです。 cssはかなり把握してたつもりだったんだけど、理由は良く分からない（笑）かなり僕も未熟なようで（汗；） あと、liタグは改行しないのが良いかもです。 <li><Img Src="tab1-1.jpg"></li><li><Img Src="tab2-1.jpg"></li><li><Img Src="tab3-1.jpg"></li><li><Img Src="tab4-1.jpg"></li> <li>それぞれを改行しちゃうと、それぞれの間にスペースが出来てしまう事が多々あります。
お礼
ありがとうございました。 おっしゃるとおりに変更したら、隙間がなくなりました。 理由はよく分かっていませんが・・・(^_^;)