使css菜單100％寬

-2

我有這個css代碼爲響應菜單：使css菜單100％寬

我想使菜單100％的頁面寬度，我已嘗試添加寬度：100％;在rmm班，但它仍然不是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; 
}

的菜單100％的寬度與此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; 
}

，但仍完全同樣，整個菜單現在只剩下漂浮物

來源

2013-10-27 charlie

一個小提琴並張貼鏈接。 –

由於某種原因，它沒有在小提琴上正常工作，但它在本地和我的web服務器 – charlie

正常工作沒有鏈接只是一些猜測，你有太多無關的風格的代碼，這是混亂，所以幫助我們來幫助你！ – codedme

如果您的菜單有屬性position: relative，它將相對於其第一個祖先進行定位。用你想要的position: absolute。請參考the MDN page on position。

您也可以嘗試global reset一次性處理所有margin和padding問題。

來源

2013-10-27 14:05:49 Evan

看看我的最新編輯 – charlie

我沒有看到最新的編輯，但我給答案添加了一條建議。嘗試鏈接中的全局重置，看看它是否有效。你可能需要重新設計一些其他的東西，但它會使大多數瀏覽器的功能相同。 – Evan

它可能是html和body邊距。

添加到您的CSS：

html, body 
{ 
margin:0; 
}

來源

2013-10-27 14:11:20 GeorgeTaylor

仍然沒有，增加了寬度：100％也是這樣，仍然相同 – charlie

嗯，適用於此codepen我： http://codepen.io/igeorgetaylor/pen/wJBLt @charlie，你使用什麼瀏覽器？ – GeorgeTaylor

您可以發佈您的菜單的屏幕截圖？從我們在這裏，你沒有重置填充.rmm ul，這可能是原因..（？）

來源

2013-10-27 14:12:07

使css菜單100％寬

回答

相關問題