试图使导航栏宽度 100% 以在一行上适合导航项目答案

【问题标题】：Trying to make the navbar width 100% to fit nav items on one line试图使导航栏宽度 100% 以在一行上适合导航项目
【发布时间】：2017-06-08 04:18:54
【问题描述】：

由于某种原因，我的导航栏没有变成 100% 宽度。我试图使.main-header 100% 宽度，但仍然不确定是什么问题。 使导航栏 100% 的原因是所有导航项都适合一行。任何想法我做错了什么？

这是导航栏在机器上的样子 http://imgur.com/a/za9LH

HTML

**Css**

/* Navigation */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: purple;
  width: 100%;
}
.logo-name {   
  margin-left: 1%;  
  background-color: red;
}    
.main-nav {
  display: flex;
  background-color: yellow;
}

.main-nav li {
  padding: 0.3em;
  align-items: flex-end;
  background-color: transparent;
  font-size: 17px;
}

<header class="main-header">
<!--<h1 class="logo-name"><li><a href="index.html">R.J Roofer</a></li></h1>-->		
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
<!--<li><a href="#">FREE QUOTE</a></li>-->				
  </nav>
</header>

【问题讨论】：

刚刚用您的代码创建了一个小提琴。 jsfiddle.net/k87qzvh7 。看一看。它占据了整个宽度。你能告诉我是什么问题吗？你说的是左右两边的小空间吗？
您在寻找单行标志吗？
这是imgur.com/a/za9LH的样子@我希望紫色导航栏是屏幕的全宽@mechanicals
如果你已经这样做了。 html, body { 填充：0;边距：0；，它仍然无法正常工作。那么必须有其他父元素占用该空间。
是的！你是对的。标题位于另一个导致问题的 div 中，谢谢！ @机械

标签： html css twitter-bootstrap responsive-design navbar

【解决方案1】：

默认情况下body 取8px 边距，这就是为什么您的导航栏不完整的原因。所以在你的身体标签中添加margin:0。这是代码笔：https://codepen.io/bhuwanb9/pen/XgmegE

body{
   margin:0;
}

【讨论】：

【解决方案2】：

您可能只需要将 html 和 body 的填充和边距设置为零。您可能需要考虑使用通用重置，例如 this 或 this。

/* Navigation */
html, body {
padding: 0;
margin: 0;
}
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: purple;
  width: 100vw;
}

.logo-name {
  margin-left: 1%;
  background-color: red;
}

.main-nav {
  display: flex;
  background-color: yellow;
}

.main-nav li {
  padding: 0.3em;
  align-items: flex-end;
  background-color: transparent;
  font-size: 17px;
}

<header class="main-header">
  <!--        <h1 class="logo-name"><li><a href="index.html">R.J Roofer</a></li></h1>
         -->
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <!--                    <li><a href="#">FREE QUOTE</a></li>
 -->
  </nav>
</header>

【讨论】：

【解决方案3】：

问题是，容器不是全宽的。而且列表项也太小了。这是一支笔：https://codepen.io/praedictus/pen/zzvpez

/* Navigation */

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: purple;
  width: 100%;
}
.logo-name {   
  margin-left: 1%;  
  background-color: red;
}    
.main-nav {
  display: flex;
  background-color: yellow;
  width: 100%;
}

.main-nav li {
  padding: 0.3em;
  align-items: flex-end;
  background-color: transparent;
  font-size: 17px;
  display: block;
  float: left;
  width: 20%;
  text-align: center;
}

【讨论】：