如何獲得我的導航/菜單欄的寬度橫跨整個頁面

的HTML如何獲得我的導航/菜單欄的寬度橫跨整個頁面

<title> 
    menubar 
    </title> 
<head> 
<link rel="stylesheet" href="style.css" type="text/css"> 
    <nav> 
     <ul> 
      <li> 
       <a href="#">Home         </a> 
      </li> 
      <li> 
       <a href="#">About Us         </a> 
       <ul> 
        <li> 
         <a href="#">What we do</a> 
        </li> 
        <li> 
         <a href="#">Members and Alumni</a> 
        </li> 
        <li> 
         <a href="http://www.katyisd.org/campus/crhs/Pages/default.aspx" target="_blank">Cinco Ranch High School</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Events         </a> 
      </li> 
      <li> 
       <a href="#">Photo Gallery         </a> 
      </li> 
      <li> 
       <a href="#">Contact Us         </a> 
      </li> 
     </ul> 
    </nav> 
</head> 
<body></body>

的CSS

@font-face { 
    font-family: NASA; 
    src: url("nasalization rg.ttf"); 
} 

nav ul ul { 
    display: none; 
} 

    nav ul li:hover > ul { 
     display: block; 

    } 

nav { 
    width:1080px; 
    margin:0 auto; 
    list-style:none; 

} 

nav ul { 
    background: #8D8D8D; 
    background: linear-gradient(top, #8D8D8D 0%, #383838 100%); 
    background: -moz-linear-gradient(top, #8D8D8D 0%, #383838 100%); 
    background: -webkit-linear-gradient(top, #8D8D8D 0%,#383838 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 0px auto 0px auto; 
    border-radius: 5.5px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    font-family: NASA; 
    font-weight: bold; 
    font-size: 20px; 
    width 100%; 
    margin-top: 0px 
} 

    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 

    nav ul li { 
    float: left; 
    padding-right: 20px 
} 
    nav ul li:hover { 
     background:#777777; 
     background: linear-gradient(top, #777777 0%, #6B6B6B 40%); 
     background: -moz-linear-gradient(top, #777777 0%, #6B6B6B 40%); 
     background: -webkit-linear-gradient(top, #777777 0%,#6B6B6B 40%); 
    } 
     nav ul li:hover a { 
      color: #2E2E2E; 
     } 

    nav ul li a { 
     display: block; 
    padding: 25px 40px; 
     color: #151515; 
    text-decoration: none; 
    } 

    nav ul ul { 
    background: #6B6B6B; border-radius: 10px; padding: 0; 
    position: absolute; top-center: 100%; 
} 
    nav ul ul li { 
     float: none; 
     border-top: 1px solid #000000; 
     position: relative; 
    } 
     nav ul ul li a { 
      padding: 15px 40px; 
      color:#2E2E2E; 
     } 
      nav ul ul li a:hover { 
       background: #4b545f; 
      }

以上香港專業教育學院包括我的導航欄HTML和CSS我一直努力弄清楚如何讓它跨越頁面的整個長度，內容居中居中，如下所示：http://www.cssnewbie.com/full-width-centered-navigation-bar/#.VY8G7PlVhBc。如果有人能幫助我，那就太好了謝謝你提前我的方式我知道我的HTML沒有這個標籤，我會修改它

來源

2015-06-27 Abhishek Srinivas

你對'nav'有一個固定的寬度......將其刪除。 –

可能的重複 - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –

Nav ul {width}缺少一個分號：它應該是寬度：; – Spade

給你的導航欄100％的寬度;然後在導航欄上設置寬度爲1080px，加上margin：0 auto ;.

來源

2015-06-27 20:33:57 Flobin

如何獲得我的導航/菜單欄的寬度橫跨整個頁面

回答

相關問題