CSS拉伸水平菜單填充所有寬度

Here是鏈接到我的網站。當你有一個廣泛的決議時，顯示沒有問題，但如果使用瀏覽器嘗試模擬一個小決議，我遇到了一個問題：導航欄不會填滿整個頁面，但只有寬度瀏覽器，儘管我使用寬度：100％;CSS拉伸水平菜單填充所有寬度

在這裏，代碼在CSS

header { 
width: 100%; 
/*min-width: 1000px;*/ 
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5); 
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5); 
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5); 
padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */ 
background: url('../img/binding_dark.png'); 
} 

nav { 
margin-bottom: 30px; 
width: 100%; 

background: -moz-linear-gradient(top, #353535 0%, #222222 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222)); 
background: -webkit-linear-gradient(top, #353535 0%,#222222 100%); 
background: -o-linear-gradient(top, #353535 0%,#222222 100%); 
background: -ms-linear-gradient(top, #353535 0%,#222222 100%); 
background: linear-gradient(top, #353535 0%,#222222 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#222222',GradientType=0); 
border-width: 1px 0 1px 0; 
border-style: solid; 
border-color: #000; 
}

頭是寬黑塊和NAV是在它裏面。

這裏是問題的一個爲例：

enter image description here

頭不會填滿所有的頁（水平），li元素會溢出，以及漸變背景會裂開。

請問有沒有解決方法？

來源

2013-07-05 Exia0890

沒有與佈局等問題，但對眼前的問題，你可以嘗試

#page-wrap header {min-width: 1400px;}

來源

2013-07-05 04:25:54

謝謝您的回答，李元素現在留在酒吧，但頁面會延長太多。 – Exia0890

你能告訴我更多關於其他問題嗎？ – Exia0890

如何讓頁面在小屏幕上顯示？最好在小屏幕上改變樣式，以便內容不那麼寬。 –

嘗試增加nav ul的寬度。

nav ul { 
width: 809px; 
height: 45px; 
margin: 0 auto; 
border-left: 1px solid #111; 
border-right: 1px solid #444; 
}

您可以使用開發人員工具（F12）來檢查元素。

檢查此 screenshot 。

來源

2013-07-05 04:29:26 Praveen

感謝您的回答，但它不起作用。李元素仍然會溢出。 – Exia0890

@ Exia0890你可以在截圖中指出溢出嗎？ – Praveen

我已經用溢出示例更新了帖子。 – Exia0890

這是您的修正CSS和fiddle link

header { 
    width: 100%; 
    -webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5); 
    -moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5); 
    box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5); 
    padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */ 
    background: url('../img/binding_dark.png'); 
} 

hgroup, 
main, 
nav { 
    margin-bottom: 30px; 
    width: 100%; 
    background: -moz-linear-gradient(top, #353535 0%, #222222 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222)); 
    background: -webkit-linear-gradient(top, #353535 0%,#222222 100%); 
    background: -o-linear-gradient(top, #353535 0%,#222222 100%); 
    background: -ms-linear-gradient(top, #353535 0%,#222222 100%); 
    background: linear-gradient(top, #353535 0%,#222222 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#222222',GradientType=0); 

    border-top:1px solid #000; 
    border-bottom:1px solid #000; 
} 

    /* nav:before { 
     border-top: 1px solid #444; 
    } 

    nav:after { 
     border-top: 1px solid #333; 
    }*/ 

    nav ul { 
     /*width: 808px;*/ 
     height: 45px; 
     margin: 0 auto; 
     /*border-left: 1px solid #111; 
     border-right: 1px solid #444;*/ 
    } 

    nav li { 
     float: left; 
     list-style-type:none; 
    } 
     nav li a { 
      display: inline-block; 
      /*width: 200px;*/ 
      width:auto; 
      padding:0 50px; 
      height: 45px; 
      font: bold 15px 'Arial', sans-serif; 
      color: #fff; 
      text-decoration: none; 
      text-align: center; 
      line-height: 48px; 
      text-shadow: 1px 1px 0px #111; 
      filter: dropshadow(color=#111, offx=1, offy=1); 
      border-left: 1px solid #444; 
      border-right: 1px solid #111; 

      background-color:#2B2B2B; 
     } 


      nav li a:hover { 
       background: -moz-linear-gradient(top, #444 0%, #222 100%); 
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222)); 
       background: -webkit-linear-gradient(top, #444 0%,#222 100%); 
       background: -o-linear-gradient(top, #444 0%,#222 100%); 
       background: -ms-linear-gradient(top, #444 0%,#222 100%); 
       background: linear-gradient(top, #444 0%,#222 100%); 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#222',GradientType=0); 
       /*background-color:#2F2F2F;*/ 
      } 

      nav li a:active { 
       background: #222; 
       -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3); 
       -moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3); 
       box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3); 
      } 

       nav li a:active:after { 
        content: ""; 
        display: block; 
        width: 100%; 
        height: 4px; 
        position: relative; 
        bottom: 6px; 
        background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5e1f), color-stop(100%,#ff3410)); 
        background: -webkit-linear-gradient(top, #ff5e1f 0%,#ff3410 100%); 
        background: -o-linear-gradient(top, #ff5e1f 0%,#ff3410 100%); 
        background: -ms-linear-gradient(top, #ff5e1f 0%,#ff3410 100%); 
        background: linear-gradient(top, #ff5e1f 0%,#ff3410 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5e1f', endColorstr='#ff3410',GradientType=0); 
       }

來源

2013-07-05 04:43:50

感謝您的回答，li元素保留在黑色框中，但標題仍不會佔用所有頁面，但僅佔用窗口寬度。 – Exia0890

CSS拉伸水平菜單填充所有寬度

回答

相關問題