隙間をなくすには？

Question

タブメニュー式のＨＰをつくろうと思っています。一番上にタブの画像を横一列に並べて、そのすぐ下にコンテンツを書くためのテーブル（？）を配置したいと思っています。タブ画像を横に並べて、その下にテーブルを配置するまではうまくいったのですが、タブとテーブルに間に隙間があいてしまってどうしてもくっつけることができません。下記がHTMLとCSSのソースなのですが、タブとテーブルをくっつけるにはどうしたらいいのでしょうか？ 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;}

noname#65286 · Accepted Answer

リストを使わないでこんな風にしたらどうでしょう

わかりやすいように行を分けて書いていますが、画像の間に半角スペースが表示される場合は

～

を１行に記述してください

ao_ · Answer

余白に関しては#2さんと#3さんの回答で解決できると思います。気になったのは私は

の間には改行を付けない方がいいと本で読んだことがありました。また、リストをdivで括っていますが、idもclassも付けないならなくてもいいタグかも知れません。CSSを全て見ないとわかりませんが。

quads · Answer

> タブメニュー式のＨＰをつくろうと思っています。
私の知識不足だと思うのですが、どのようにされたいのかが分かりませんでした…。

とりあえず、リスト内の画像とボックスの間に余白が出来なければ良いのでしょうか。

指定し得るポイントを箇条書き。
●ul要素の余白を無くす。
⇒margin及びpaddingで0を指定。
●フロート化せず、代わりにインライン化。
⇒li要素にdisplay:inlineを指定。
●li要素間に空白類文字を含ませない。
⇒#2さんの通りです。それぞれの間だけでなく、下部にも影響が出ます。
※ソースを見やすくしたいのであればを利用したり。
●img要素にvertical-align:text-bottomを指定。
⇒下端を揃えます。ブラウザの解釈によっては指定しないと余白が作られてしまいます。


そんな感じで出来る気がします。

補足ですが、li要素をそのまま（display:list-item）で利用するのであれば、list-style-typeに注意しないとデザインが崩れてしまう可能性があります。
というか、マーカーが画像と重なっています。


2行目の通りで完成形が分からないのですが、リストを使う必要性が無ければ、#1さんの通りな気もします。

coder · Answer

えっと li {float:left;}ではなく、li{display:inline;}にすると解決するようです。 cssはかなり把握してたつもりだったんだけど、理由は良く分からない（笑）かなり僕も未熟なようで（汗；）あと、liタグは改行しないのが良いかもです。

それぞれを改行しちゃうと、それぞれの間にスペースが出来てしまう事が多々あります。

隙間をなくすには？

リストを使わないでこんな風にしたらどうでしょう

余白に関しては#2さんと#3さんの回答で解決できると思います。

> タブメニュー式のＨＰをつくろうと思っています。

えっと

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング