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>

來源

2017-10-21 Jvyki Razbalowski

請分享您的html – LSKhan

我們可以看看您的HTML嗎？ – vsync

已添加html代碼 –

讓你緣填充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; 
    }

來源

2017-10-21 17:08:51

對不起，但那是行不通的 –

現在檢查我給你完整的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; 
}

來源

2017-10-21 17:09:49 stybl

嘗試刪除body保證金：

body { margin: 0; }

來源

2017-10-21 17:09:52

這對我來說，工作了，謝謝！ –

@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; 
}

來源

2017-10-21 17:12:00 idkn

您是否嘗試過簡單地使用 <meta name="viewport" content="width=device-width, initial-scale=1.0">在你的html頭內？我的個人網站導航欄文件與您的非常相似，但我沒有遇到過這類問題。

來源

2017-10-21 21:57:39

100％寬度CSS導航欄菜單

回答

相關問題