100％宽度CSS导航栏菜单

Question

我制作了一个导航栏，但我无法将其设为全宽。

图片预览：

我希望它的全宽并且没有填充，如下所示：

#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>

Answer 1

使你的边距填充为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;
    }

Answer 2

尝试删除body保证金：

body { margin: 0; }

Answer 3

原因很可能是你的<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;
}

Answer 4

不要忘记将它放在每个css文件上，我希望它会有所帮助

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
}

Answer 5

您是否曾尝试在html头中使用time？我的个人网站navbar文件与你的非常相似，但我没有遇到过这种问题。