100%宽度CSS导航栏菜单
我做了一个导航栏,但我无法做到全宽。100%宽度CSS导航栏菜单
#cssmenu {
width: 100%;
font-family: Raleway, sans-serif;
line-height: 1;
border-bottom: 4px solid #1CE678;
}
#cssmenu > ul {
background: #3db2e1;
}
#cssmenu > ul > li {
float: right;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li class='active'><a href='#'>5</a></li>
</ul>
</div>
让你缘填充0
的Html
<div id=cssmenu >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
的CSS
body{
margin:0;
}
#cssmenu {
width: 100%;
font-family: Raleway, sans-serif;
line-height: 1;
border-bottom: 4px solid #1CE678;
margin:0;
padding:0;
}
#cssmenu > ul {
background: #3db2e1;
margin:0;
padding:0;
text-align:right;
}
#cssmenu > ul > li {
display:inline-block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
对不起,但那是行不通的 –
现在检查我给你完整的code.hope它会帮助你 –
的原因很可能是你的<ul>
。修改你的CSS像这样:
#cssmenu > ul {
background: #3db2e1;
margin:0;
padding:0;
}
#cssmenu > ul > li {
float: right;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
margin:0;
padding:0;
}
你还需要确保的父元素(大概body
)没有任何填充。
body {
padding:0;
margin:0;
}
尝试删除body
保证金:
body { margin: 0; }
这对我来说,工作了,谢谢! –
@JvykiRazbalowski如果它解决了您的问题,一定等待期限后,务必将答案标记为[接受](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)结束了。 – stybl
不要忘记把这个每天css文件,我希望这将有助于
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
}
您是否尝试过简单地使用 <meta name="viewport" content="width=device-width, initial-scale=1.0">
在你的html头内?我的个人网站导航栏文件与您的非常相似,但我没有遇到过这类问题。
请分享您的html – LSKhan
我们可以看看您的HTML吗? – vsync
已添加html代码 –