DIV在FireFox中未正确对齐
问题描述:
IE,Chrome和Safari中的以下HTML和CSS代码行不一致,但它不在FireFox中排列。我能做些什么来使它在所有四种主流浏览器中都能正常工作?DIV在FireFox中未正确对齐
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; text-align: center; }
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }
#featuredexhibit { width: 740px; height: 200px; background-color: #A7A9AC; margin: 0; clear: both; }
答
不允许你用相同的ID几次(subnavtab)。改用类。
删除所有的浮动属性,使用text-align:center应用到你的#subnav。这将集中所有的直列块包含
+0
我改变了ID为类,它仍然没有排队。 #subnav div为第一个div的前面和最后一个div的后面增加额外的空间。 – 2013-03-19 23:22:53
答
.subnavtab {
box-sizing: border-box;
background-color: #A1CD3A;
padding: 10px 10px 10px 10px;
display: inline-block;
width: 20%;
border-left: 1px solid gray;
border-right: 1px solid gray;
}
下面是完整的代码:http://jsfiddle.net/7tjmZ/2/
答
使用类名称,而不是ID ,您可以使用类名
示例设置的CSS属性:
.yourClassName
{
background-color: #A1CD3A;
padding: 10px 10px 10px 10px;
margin: 0 5px 0 0;
display: inline-block;
}
您有相同的** ID **多次。改为使用** class **。 – Vucko 2013-03-19 22:39:07
尽管你的身份证问题像说Vucko似乎都在我的Firefox和Chrome上工作正常... 您使用的是哪个版本的Firefox? – Acuao 2013-03-19 22:41:23
它使用Firefox 10.0,但我只是将它更新到19.0.2。 – 2013-03-19 22:56:05