如何讓導航欄在頁面的整個寬度上伸展HTML CSS

我正嘗試創建一個網站，並且在嘗試使菜單欄橫跨網頁的寬度時遇到問題。有人可以幫忙嗎？下面是菜單欄我的CSS/HTML：如何讓導航欄在頁面的整個寬度上伸展HTML CSS

ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding-left: 2px; 
 
    position: fixed; 
 
    top: 0px; 
 
    word-spacing: 2px; 
 
} 
 
li { 
 
    float: left; 
 
    display: inline; 
 
    word-spacing: 2px; 
 
    padding-left: 70px; 
 
    background-color: #610000; 
 
} 
 
#menubar a{ 
 
    display: inline; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-family: PT sans, sans-serif; 
 
    color: #FFDFC1; 
 
    padding-left:0px; \t 
 
} 
 

 

 
#menubar a:hover { 
 
    color: #092601; 
 
    background-color:#610000; 
 
} 
 
#menubar .active{ 
 
    color: #092601; 
 
} 
 

 
body{ 
 
    background-color: #ffffff; 
 
    margin-left: 350px; 
 
}

<div id="menubar"> 
 
    <ul> 
 
     <li><a href="home.html">Home</a></li> 
 
     <li><a href="about.html">About Us</a></li> 
 
     <li><a href="menu.html">Menu</a></li> 
 
     <li><a href="location.html">Location</a></li> 
 
     <li><a href="gallery.html">Gallery</a></li> 
 
     <li><a href="contact.html">Contact Us</a></li> 
 
    </ul> 
 
</div>

來源

2016-04-21 CH26

你的HTML實際呈現的問題，所以我們不能很容易看到代碼。 – fetherolfjd

請創建一個jsfiddle或代碼片段。 – rmondesilva

你試過給你的#menubar'寬度：100％;'？ – scoots

li { 
 
    background-color: #610000; 
 
} 
 
#menubar a{ 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-family: PT sans, sans-serif; 
 
    color: #FFDFC1; 
 
} 
 
#menubar a:hover { 
 
    color: #092601; 
 
    background-color:#610000; 
 
} 
 
#menubar .active{ 
 
    color: #092601; 
 
} 
 
ul{ 
 
    padding: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: box; 
 
} 
 
li{ 
 
    list-style: none; 
 
    list-style:none; 
 
    text-align: center; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 
body { 
 
    margin: 0px; 
 
}

<div id="menubar"> 
 

 
    <ul> 
 
       <li><a href="home.html">Home</a></li> 
 
       <li><a href="about.html">About Us</a></li> 
 
       <li><a href="menu.html">Menu</a></li> 
 
       <li><a href="location.html">Location</a></li> 
 
       <li><a href="gallery.html">Gallery</a></li> 
 
       <li><a href="contact.html">Contact Us</a></li> 
 
    </ul> 
 
</div>

來源

2016-04-21 02:33:30

非常感謝您的回答，但它仍然無法正常工作。這只是將整個頁面向左移動。而我試圖創建一個覆蓋整個屏幕的單頁網頁，而且只是一個滾動功能。但是我無法讓菜單欄在整個頁面頂部展開？ – CH26

抱歉，更新的答案基於http://stackoverflow.com/questions/7758866/making-an-unordered-list-span-100-the-width-of-a-div –

爲什麼你還設置margin-留在你的CSS爲人體去除

這也許對你有所幫助

https://stackoverflow.com/a/11520529/2430556

來源

2016-04-21 02:36:38

使其相對於您的屏幕大小。

使用vw單位。所以，以適應它，使它100vw您ul ..

然後在你的li ..刪除padding-left there..and然後

設置其寬度爲寬度父UL由李兒童數量除以 ..

width: calc(100%/6);

注：calc()功能僅適用於現代的瀏覽器。你可以，如果你想手動設置。

ul { 
 
     list-style-type: none; 
 
    \t margin: 0px; 
 
    \t padding-left: 2px; 
 
    \t position: fixed; 
 
    \t top: 0px; 
 
    \t word-spacing: 2px; 
 
     width: 100vw; 
 
    } 
 
    li { 
 
    \t float: left; 
 
     width: calc(100%/6); 
 
    \t display: inline; 
 
    \t word-spacing: 2px; 
 
    \t background-color: #610000; 
 
    } 
 
    #menubar { 
 
     width: 100%; 
 
    } 
 
    #menubar a{ 
 
    \t display: inline; 
 
    \t text-align: center; 
 
     text-decoration: none; 
 
    \t font-size: 15px; 
 
    \t font-family: PT sans, sans-serif; 
 
     color: #FFDFC1; 
 
     padding-left:0px; 
 
     
 
    \t 
 
    } 
 
    
 
    
 
    #menubar a:hover { 
 
     color: #092601; 
 
    \t background-color:#610000; 
 
    } 
 
    #menubar .active{ 
 
    \t color: #092601; 
 
    } 
 
    
 
    body{ 
 
    \t background-color: #ffffff; 
 
    }

<div id="menubar"> 
 

 
    <ul> 
 
    \t \t <li><a href="home.html">Home</a></li> 
 
    \t \t <li><a href="about.html">About Us</a></li> 
 
    \t \t <li><a href="menu.html">Menu</a></li> 
 
    \t \t <li><a href="location.html">Location</a></li> 
 
    \t \t <li><a href="gallery.html">Gallery</a></li> 
 
    \t \t <li><a href="contact.html">Contact Us</a></li> 
 
    </ul> 
 
</div>

來源

2016-04-21 02:54:11 rmondesilva

1）給出的HTML和身寬度：100％

2）給出了ul寬度：100％

3）拆下體餘量

4）給出ul背景色而不是li，你會注意到不同之處

html, body { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #ffffff; 
 
} 
 

 
ul { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding-left: 2px; 
 
    word-spacing: 2px; 
 
    background-color: #610000; 
 
} 
 

 
li { 
 
    float: left; 
 
    word-spacing: 2px; 
 
    padding-left: 70px; 
 

 
} 
 

 
#menubar { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#menubar a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-family: PT sans, sans-serif; 
 
    color: #FFDFC1; 
 
    padding-left:0px; 
 
} 
 

 

 
#menubar a:hover { 
 
    color: #092601; 
 
    background-color: #610000; 
 
} 
 

 
#menubar .active{ 
 
    color: #092601; 
 
}

<ul id="menubar"> 
 
    <li><a href="home.html">Home</a></li> 
 
    <li><a href="about.html">About Us</a></li> 
 
    <li><a href="menu.html">Menu</a></li> 
 
    <li><a href="location.html">Location</a></li> 
 
    <li><a href="gallery.html">Gallery</a></li> 
 
    <li><a href="contact.html">Contact Us</a></li> 
 
    </ul>

https://jsfiddle.net/35c5b93q/

來源

2016-04-21 02:57:03

如何讓導航欄在頁面的整個寬度上伸展HTML CSS

回答

相關問題