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导航栏菜单

回答

相关问题