0

我有以下 HTML 代码，其中subnavdiv 是标签的集合，这些div标签将充当featuredexhibitdiv 中的选项卡。问题是在featureexhibitdiv 的顶部和subnav选项卡的底部之间添加了一个空格。

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 一个浮点数，然后清除 featureexhibit ，然后只有它不能在它们之间节省空间。

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

看这个演示

于 2013-03-19T01:15:48.553 回答
0

老实说，我不确定为什么会有空白，但我通过删除inline-block并创建一个清晰的两者在 Chrome 中修复了它。

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/

问题似乎是一行行内块元素中的新行被视为空白字符。要解决这个问题，请使用浮动块或 flexbox。

于 2016-06-21T10:15:06.213 回答