-2

我有这个用于响应式菜单的 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;
}

但仍然完全一样，整个菜单现在只是向左浮动

4

3 回答 3

0

它可能是 html 和 body 的边距。

将此添加到您的CSS：

html, body
{
 margin:0;
}
于 2013-10-27T14:11:20.883 回答
0

你能张贴你的菜单截图吗？根据我们这里的情况，您没有在.rmm ul上重置填充，这可能是原因..（？）

于 2013-10-27T14:12:07.123 回答
0

如果您的菜单具有属性position: relative，它将相对于其第一个祖先定位。用于position: absolute你想要的。

有关更多信息，请查看MDN 页面上的位置。

您还可以尝试全局重置以一次性处理所有margin问题padding。

于 2013-10-27T14:05:49.967 回答