提问者:小点点

我如何编辑这段代码,使导航栏的项目是左对齐,居中对齐和右对齐?


我需要帮助编辑我的代码,以调整导航栏项目左对齐,居中和右对齐以及响应。 我尝试的代码将我的下拉按钮移动到导航栏之外,或者删除CSS。

null

.navbar {
  overflow: hidden;
  background-color: #c2d6d6;
}

.navbar a {
  float: left;
  font-size: 20px;
  color: #009999;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #85adad;
}
<div class="navbar">
  <a href="#home">Internal Auditor Training</a>

  <div class="dropdown">
    <button class="dropbtn">ISO 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">9001</a>
      <a href="#">17025</a>
    </div>
  </div> 

  <div class="dropdown">
    <button class="dropbtn">Verification 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Balance</a>
      <a href="#">Gravimetric POVA 2</a>
      <a href="#">Thermometer/ Data logger</a>
    </div>
  </div> 
</div>

</body>
</html>

null


共1个答案

匿名用户

从你的问题中,这是我理解的。 您有一个导航栏,希望对齐它的元素,一个向左,一个居中,一个向右对齐。

如果是这样,您可以使用CSS flex-box来对齐它们。 制作一个flex容器,并将justify-content属性设置为space-between。 justify-content:space-between;

请参阅下面的代码片段

null

#cont {
  display: flex;
  background: lightgray;
  justify-content: space-between;
  position: relative;
  top: 50px;
  align-items: center;
}

#a,
#b,
#c {
  width: 50px;
  height: 50px;
  padding:15px;
}

#a {
  background: red;
}

#b {
  background: orange;
}

#c {
  background: lightgreen;
}
<div id="cont">
  <div id="a">
    1
  </div>
  <div id="b">
    2
  </div>
  <div id="c">
    3
  </div>
</div>