導航欄正在移動

嗨我正在通過使用html製作網站& css我的導航欄有問題。當我減少瀏覽器大小時，導航欄上的文本正在移動。這裏PIC導航欄正在移動

enter image description here

我的CSS代碼：

.menu{ 
     margin-top:4em; 
     width:100%; 
     height:4em; 
     font-size:0.813em; 
     list-style-type:none; 
     background: rgba(255, 255, 255, 0.75); 
     position:fixed; 

    } 
.menu li{ 
    float:right; 
    padding:1em 1em; 
    display:inline; 

    }

如何避免這種情況呢？謝謝。

來源

2014-02-09 mxyz

這是因爲你的導航欄的width和德list-items。當德5 list-items在一起比導航欄的總width更廣泛，它可以摺疊像你image。爲了防止這種情況，您可以使用min-width

.menu{ 
    .... 
    min-width: 500px; 
}

來源

2014-02-09 22:37:19

沒問題，樂於幫忙。 –

您需要使用CSS媒體查詢。例如

@media (min-width: 768px) {  
    .h1 { 
     font-size: 21px; 
    } 
} 

@media (min-width: 480px) { 
    .h1 { 
     font-size: 16px; 
    } 
}

和你的導航欄針對不同屏幕尺寸的設定不同的寬度。

來源

2014-02-09 22:33:10

導航欄正在移動

回答

相關問題