时间戳

首页 > 解决方案 > 不能将导航栏项目放在最左边

html - 不能将导航栏项目放在最左边

问题描述

我想制作一个导航栏，左边有主标志，右边休息，它们是左右的，但仍然有点居中，而不是极端的左/右

编辑：我想我没有很好地解释我的问题问题是导航栏上的列表项没有粘在其容器的最左侧并且有点居中

我的导航栏：

.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  line-height: 65px;
  text-align: center;
  float: left;
  margin:0;
  padding:0;
}

.nav div.logo {
  float: left;
  width: auto;
  height: auto;
  padding-left: 10px;
  margin: 0;
}

.nav div.logo a {
  text-decoration: none;
  color: #fff;
  font-size: 2.5rem;
  float: left;
  margin: 0;
}
<nav class="nav">
  <div class="container">
      <div class="logo">
          <a href="#">Your Logo</a>
      </div>
      <div id="mainListDiv" class="main_list">
          <ul class="navlinks">
              <li><a href="#">About</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
          </ul>
      </div>
      <span class="navTrigger">
          <i></i>
          <i></i>
          <i></i>
      </span>
  </div>
</nav>

我尝试添加margin:0，padding: 0这是一个 codepen 示例，所以我知道它保留在左侧，但可以理解为什么它不在我的代码中保留

标签： htmlcsssassnavbar

解决方案

为什么不定位它们？虽然我不确定您的代码到底要完成什么，但如果您希望它们位于最左边或最右边，您可以为每个位置分配一个位置（值https://www.w3schools.com/Css/css_positioning .asp），然后允许您设置左或右属性（请参阅https://www.w3schools.com/cssref/pr_pos_left.asp和https://www.w3schools.com/cssref/pr_pos_right.asp）。

推荐阅读