需要幫助的CSS導航寬度

我是新來的CSS，我有一個頂級導航，但我無法設置其寬度。當我使用Dreamweaver，ie9，ie6，Firefox和Opera進行測試時，這看起來不同。這是我的代碼：需要幫助的CSS導航寬度

@charset "utf-8"; 
/* CSS Document */ 

html { 
    background: url(images/light-tile.gif) repeat; 
} 
body { 
    overflow: auto; 
    width: 54.35em; 
    margin: 0 auto; 
    background-color: #fff; 
    padding-left: 0.25em; 
    padding-right: 0.4em; 
    border: 0.07em solid #97b4e0; 
    overflow: visible; 
} 
#main { 
    background-color: #fff; 
} 
ul#top-nav { 
    list-style: none; 
    margin: .9em .9em .9em 0; 
    padding: 0; 
    width: 110%; 
} 
ul#top-nav li { 
    display: inline; 
} 
ul#top-nav li a { 
    text-decoration: none; 
    font-size: 0.75em; 
    font-family: Arial, Helvetica, sans-serif; 
    padding: 0.90em 0; 
    width: 18.5%; /* for 5 items */ 
    background: #99CCFF; 
    color: #3F4037; 
    font-weight: bold; 
    float: left; 
    display: inline-block; 
    text-align: center; 
    border-right: 0.05em solid #fff; 
    border-left: 0.05em solid #fff; 
    border-bottom: 0.2em solid #97b4e0; 
} 
ul#top-nav li a:hover { 
    color: #000; 
    font-weight: bolder; 
    background: #D7EBFF; 
    border-bottom: 0.2em solid #e9e9e9; 
} 
... 

<body> 
<div id="main"> 
     <div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div> 
     <img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" /> 
     <ul id="top-nav"> 
       <li><a href="http://www.kumcagizioo.meb.k12.tr">ANASAYFA</a></li> 
       <li><a href="galeri.html">GALERİ</a></li> 
       <li><a href="personel.html">PERSONEL</a></li> 
       <li><a href="iletisim.html">İLETİŞİM</a></li> 
       <li><a href="zd.html">ZİYARETÇİ DEFTERİ</a></li> 
     </ul> 
     <div class="clear"></div> 
     <div id="faux"> 
       ...

如果它不可能在所有瀏覽器上查看相同，我將不得不使用一個表。感謝您的幫助。

真誠

來源

2011-08-28 nikel

目前尚不清楚你想要什麼，但這裏有一個[的jsfiddle（http://jsfiddle.net/u78Ks/）你的菜單欄的代碼。 – Sparky

感謝您的回覆。問題是根據瀏覽器（或其版本）導航欄寬度看起來很窄或很寬。 – nikel

看起來這可能是問題

width: 18.5%; /* for 5 items */

在這裏

ul#top-nav li a { 
    text-decoration: none; 
    font-size: 0.75em; 
    font-family: Arial, Helvetica, sans-serif; 
    padding: 0.90em 0; 
    width: 18.5%; /* for 5 items */ 
    background: #99CCFF; 
    color: #3F4037; 
    font-weight: bold; 
    float: left; 
    display: inline-block; 
    text-align: center; 
    border-right: 0.05em solid #fff; 
    border-left: 0.05em solid #fff; 
    border-bottom: 0.2em solid #97b4e0; 
}

瀏覽器可以解釋這種不同的基礎上，字體大小，窗口大小等。

嘗試將其設置爲以像素爲單位的靜態寬度。

來源

2011-08-28 21:52:23

嗯，這是一個好主意。我會嘗試，謝謝。 – nikel

@nikel沒問題。很高興它解決了。 –