Question

出于某种原因，我的导航栏没有变为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>

Answer 1

可能你只需要将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>

Answer 2

默认情况下body获取8px页边距，这就是为什么你的导航栏不是完整的。因此，在您的正文标记中添加margin:0。这是codepen：https://codepen.io/bhuwanb9/pen/XgmegE

body{
   margin:0;
}

Answer 3

问题是，容器不是全宽。列表项目也太小了。这是一支笔：an official pull request

/* 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;
}

尝试使导航栏宽度100％以适合一行上的导航项目

3 个答案: