我有一个响应式菜单的css代码:
我想让菜单100%宽度的页面,我尝试添加宽度:100%;在rmm级但它仍然不是100%宽,我看不出什么阻止它。
如何使菜单100%宽度的页面宽度
.rmm {
display:block;
position:relative;
width:100%;
background:#F36F25;
padding:0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family:Arial;
}
.rmm a {
color:#ffffff;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
/* */
.rmm .rmm-main-list li {
display:inline;
padding:padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/* MINIMAL STYLE */
.rmm.minimal a {
color:#ffffff;
}
.rmm.minimal a:hover {
background:#666666;
}
.rmm.minimal .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm.minimal .rmm-toggled {
width:95%;
min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
display:block;
height:36px;
color:#333333;
text-align:left;
position:relative;
}
.rmm.minimal .rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#33333;
}
.rmm.minimal .rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm.minimal .rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#333333;
width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #dedede;
color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
border-top:1px solid #dedede;
}
使用此HTML:
<div class="rmm" data-menu-style='minimal'>
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about-me'>About me</a></li>
<li><a href='#gallery'>Gallery</a></li>
<li><a href='#blog'>Blog</a></li>
<li><a href='#links'>Links</a></li>
<li><a href='#sitemap'>Sitemap</a></li>
</ul>
</div>
我刚试过:
.rmm {
width:100%;
background:#F36F25;
text-align: center;
}
但仍然完全一样,整个菜单现在只剩下了
答案 0 :(得分:0)
如果您的菜单中包含属性position: relative
,则它将相对于其第一个祖先进行定位。使用position: absolute
即可获得所需内容。
有关详细信息,请查看the MDN page on position。
您还可以尝试global reset一次性处理所有margin
和padding
个问题。
答案 1 :(得分:0)
这可能是html和身体边缘。
将此添加到您的css:
html, body
{
margin:0;
}
答案 2 :(得分:0)
您可以发布菜单的屏幕截图吗? 从我们这里得到的,你没有重置 .rmm ul 上的填充,这可能是原因..(?)