我需要帮助编辑我的代码,以调整导航栏项目左对齐,居中和右对齐以及响应。 我尝试的代码将我的下拉按钮移动到导航栏之外,或者删除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
从你的问题中,这是我理解的。 您有一个导航栏,希望对齐它的元素,一个向左,一个居中,一个向右对齐。
如果是这样,您可以使用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>