0

次の HTML コードがあります。div は、div全体でタブとして機能するタグsubnavのコレクションです。問題は、 divの上部とタブの下部の間に空白が追加されていることです。divfeaturedexhibitfeatureexhibitsubnav

HTML:

<div id="subnav">
    <div id="subnavtab"><a href="">Plan Your Visit</a></div>
    <div id="subnavtab"><a href="">Tour the Museum</a></div>
    <div id="subnavtab"><a href="">Program & Events</a></div>
    <div id="subnavtab"><a href="">Membership</a></div>
    <div id="subnavtab"><a href="">Donate</a></div>
</div>
<div id="featuredexhibit">
    Featured Exhibit - this can be a rotating menu of exhibits
</div>

CSS:

#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }

Chrome 開発者ツールを使用して問題を見つけようとしましたが、うまくいかないか、何を探すべきかわかりません。

4

4 に答える 4

5

コードに問題はないようです。

他の CSS が競合していないことを確認しますか? 使用している CSS タグが、HTML に最後に追加された CSS のものであることを確認してください。

例えば、

<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">

「css-2.css」に共通のタグがある場合、「css-1.css」の同様のタグを上書きします。

于 2013-03-19T00:51:47.657 に答える
2

サブナビにフロートを与えてから、注目の展示物をクリアする必要があります。そうすると、それらの間のスペースを節約できませんでした。

#subnav{float: left;}
#featuredexhibit{clear: both;}

このデモを見る

于 2013-03-19T01:15:48.553 に答える
0

空白が存在する理由は正直わかりませんが、Chrome で空白を削除してinline-block両方を作成することで修正しました。

CSS

.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }

HTML

<div class="subnav">
    <div class="subnavtab"><a href="">Plan Your Visit</a></div>
    <div class="subnavtab"><a href="">Tour the Museum</a></div>
    <div class="subnavtab"><a href="">Program & Events</a></div>
    <div class="subnavtab"><a href="">Membership</a></div>
    <div class="subnavtab"><a href="">Donate</a></div>
    <div class="clear"></div>
</div>
<div class="featuredexhibit">
    Featured Exhibit - this can be a rotating menu of exhibits
</div>

jsFiddle: http://jsfiddle.net/vFFx5/

于 2013-03-19T01:05:27.900 に答える
0

これが古いことは知っていますが、この問題に遭遇したばかりなので、将来の訪問者にこの記事を紹介することもできます: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

問題は、改行がインラインブロック要素の行の空白文字としてカウントされることです。これを解決するには、フローティング ブロックまたはフレックスボックスを使用します。

于 2016-06-21T10:15:06.213 に答える