如何使導航菜單保持原狀

當使用UL（無序列表）構造導航菜單時，我注意到當我放大和縮小頁面時，列表項向右移動，使它們脫節。如何讓他們始終在同一個地方？如何使導航菜單保持原狀

我在JSFiddle上添加了以下內容來玩它。

<div id="navigation"> 
        <ul> 
          <font face="Verdana, Geneva, sans-serif"> 
          <li > <a href="../index.html" > ANA SƏHIFƏ </a> </li> 
          <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li> 
          <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li> 
          <li><a> KİTABLAR </a></li> 
          <li> <a> VİDEOLAR </a> </li> 
          <li> <a id="last-item">FOTOLAR</a> </li> 
          </font> 
        </ul> 
#navigation { 
    width: 900px; 
    margin: 0 auto 0px; 
} 

div#navigation ul li { 
    font-size:9px; 
    list-style:none; 
    background-color:transparent; 
    background-color:#FFF; 
    float: left; 
} 
div#navigation ul li:hover { 
    background-color:#9C1A35; 
} 
div#navigation ul li a { 
    color:#333333; 
    text-decoration:none; 
    display: block; 
    padding:10px 43px 20px; 
} 
#navigation ul li a:hover { 
    color:#fff; 
} 
ul { 
    padding:0; 
} 
#active-li { 
    background:#9C1A35 !important; 
} 
#active-li a { 
    color:#fff !important; 
} 
#last-item { 
    padding: 10px 42px 20px 42px !important; 
} 
div#navigation ul li #active { 
    background:#9C1A35 !important; 
} 
div#navigation ul li #active a { 
    color:#fff; 
}

來源

2012-07-28 Elmir Kouliev

嘗試使用％和EM的單元尺寸，而不是PX – 2012-07-28 03:52:43

[jsfuddle（http://jsfiddle.net/）總是一個更好的方式來問與web開發和設計相關的問題 – 2012-07-28 03:59:41

大多數的網頁過度放大時丟失了自己的佈局。這發生在瀏覽器中啓用「僅縮放文本」選項時。這裏是我的建議：

下降padding-right和<a>的padding-left項目爲較低的值（43px是太多你的菜單）。
嘗試給出height,min-height和max-height到您的項目，並設置overflow:hidden。這樣，文本將保留在容器框中，並且不會用完。
使用相對值（百分比，em）而不是px來確定元素的大小。

來源

2012-07-28 06:45:33 Mojtaba

應該爲所有元素使用百分比值嗎？ – 2012-07-28 14:47:33

不一定。這取決於你的設計。如果你想要一個流體佈局，你應該依靠百分比值。如果你想要一個固定寬度的佈局，像素值可以是適當的。 – Mojtaba 2012-07-30 06:53:12

#navigation { width: 900px; margin: 0 auto 0px; display: inline; }

來源

2012-07-28 03:57:10

想出了一個新的方法，使導航欄留在地方

<div id="navigation"> 
         <ul> 
           <font face="Verdana, Geneva, sans-serif"> 
           <li > <a href="../index.html" > ƏSAS SƏHİFƏ </a> </li> 
           <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li> 
           <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li> 
           <li><a href="../Books/booksAZ.html"> KİTABLAR </a></li> 
           <li> <a> VİDEOLAR </a> </li> 
           <li> <a id="last-item">FOTOLAR</a> </li> 
           </font> 
         </ul> 
        </div> 

    #navigation { 
     width: 900px; 
     margin: 0 auto 0px; 
    } 
    div#navigation ul li { 
     font-size:9px; 
     list-style:none; 
     background-color:transparent; 
     background-color:#FFF; 
     float: left; 
     width:150px; 
     height:40px; 
     text-align:center; 
    } 
    div#navigation ul li:hover { 
     background-color:#9C1A35; 
    } 
    div#navigation ul li a { 
     color:#333333; 
     text-decoration:none; 
     display: block; 
     padding:6px 0px 18px; 
     border-left:1px thin black; 
     border-right:1px thin black; 
    } 
    #navigation ul li a:hover { 
     color:#fff; 
    } 
    ul { 
     padding:0; 
    } 
    #active-li { 
     background:#9C1A35 !important; 
    } 
    #active-li a { 
     color:#fff !important; 
    } 
    div#navigation ul li #active { 
     background:#9C1A35 !important; 
    } 
    div#navigation ul li #active a { 
     color:#fff; 
    }

來源

2012-08-07 21:59:06

如何使導航菜單保持原狀

回答

相關問題