Question

如何逐点向右移动品牌并在右侧移动关于投资组合和联系人，在不使用边距和填充的情况下向右移动一些空格？像这里完成的事情http://qlip.in/

<div class="navbar">
      <ul>
        <li id="brand"><a href="#">Brand</a></li>
        <li id="about"><a href="#">About</a></li>
        <li id="portfolio"><a href="#">Portfolio</a></li>
        <li id="contact"><a href="#">Contact</a></li>
      </ul>
    </div>



*{
  margin:0;
  padding:0;
}
.navbar{  
  top:0;
  position:fixed;
  width:100%;
  background-color:rgb(114, 40, 114);
}
ul{
  list-style:none;
  display:flex;
  flex-flow: row nowrap;
  background-color:rgb(114, 40, 114);
  height:80px;
  justify-content:space-between;
  align-items:center;
}

ul #brand{  
  text-align:center;


}

ul #about{

}
ul #portfolio{

}

ul #contact{

}

ul li a:hover,
ul li a:focus{
  text-decoration:none;
  color:white;
}

Answer 1

使用width: calc(100% - 50px);margin: 0 auto;

＆＃13;

*{
  margin:0;
  padding:0;
}
.navbar{  
  top:0;
  position:fixed;
  width:100%;
  background-color:rgb(114, 40, 114);
}
ul{
  list-style:none;
  display:flex;
  flex-flow: row nowrap;
  background-color:rgb(114, 40, 114);
  height:80px;
  justify-content:space-between;
  align-items:center;
  width: calc(100% - 50px);             /*  added property  */
  margin: 0 auto;                       /*  added property  */
}

ul #brand{  
  text-align:center;
}

ul #about{

}
ul #portfolio{

}
ul #contact{

}

ul li a:hover,
ul li a:focus{
  text-decoration:none;
  color:white;
}

＆＃13;

<div class="navbar">
      <ul>
        <li id="brand"><a href="#">Brand</a></li>
        <li id="about"><a href="#">About</a></li>
        <li id="portfolio"><a href="#">Portfolio</a></li>
        <li id="contact"><a href="#">Contact</a></li>
      </ul>
    </div>

＆＃13;

如何正确空间和位置导航栏

1 个答案: