0

次の HTML および CSS コードは、IE、Chrome、および Safari では一致しますが、FireFox では一致しません。4 つの主要なブラウザーすべてで動作させるにはどうすればよいですか?

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; }
4

3 に答える 3

2

同じ ID (subnavtab) を複数回使用することはできません。代わりにクラスを使用してください。

float プロパティをすべて削除し、#subnav に適用された text-align: center を使用します。これにより、含まれるすべてのインラインブロックが中央に配置されます

于 2013-03-19T22:40:30.563 に答える
0 
.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/

于 2013-03-20T00:08:15.740 に答える
-1

ID の代わりにクラス名を使用すると、クラス名を使用して CSS プロパティを設定できます

例：

.yourClassName
{
    background-color: #A1CD3A;
    padding: 10px 10px 10px 10px;
    margin: 0 5px 0 0;
    display: inline-block;
}
于 2016-02-17T11:56:10.270 に答える