我正在尝试创建一个网站,而我却无法让菜单栏延伸到网页的宽度。有人可以帮忙吗? 这是我的菜单栏的CSS / HTML:
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;
}
#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>
&#13;
答案 0 :(得分:1)
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>
答案 1 :(得分:0)
答案 2 :(得分:0)
使其相对于您的屏幕尺寸。
使用vw
单位。为了适应它,请在100vw
上将其设为ul
..
然后在li
中..删除padding-left
那里......然后
将其宽度设置为父级ul的宽度除以子级数 ..
width: calc(100%/6);
注意:calc()
功能仅适用于现代浏览器..您可以根据需要手动设置。
ul {
list-style-type: none;
margin: 0px;
padding-left: 2px;
position: fixed;
top: 0px;
word-spacing: 2px;
width: 100vw;
}
li {
float: left;
width: calc(100%/6);
display: inline;
word-spacing: 2px;
background-color: #610000;
}
#menubar {
width: 100%;
}
#menubar a{
display: inline;
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;
}
body{
background-color: #ffffff;
}
<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>
答案 3 :(得分:0)
1)给出html和body width: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;
}
&#13;
<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>
&#13;