，并且都在一个容器内。我使用align-items-center 将它们全部对齐在容器内的同一行中。然而，该属性并不适用于
标签。我缺少什么？我希望“或”与注册和登录按钮对齐。
nav ul{
padding: 0;
display: flex;
margin-bottom: 0;
}
nav li{
list-style: none;
padding: 0 0.2em;
}
nav a{
text-decoration: none;
}
#login{
display: inline-block;
min-width: max-content;
max-height: min-content;
margin: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
<div class="container d-flex align-items-center justify-content-between ">
<div class="container d-flex align-items-center ">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="container-flex d-flex align-items-center">
<a href="#" style="white-space: nowrap">Sign up</a>
<p style="padding-right: 0.5em; padding-left: 0.5em;"> or </p>
<button class="btn btn-success btn-md" id="login">Log in</button>
</div>
</div>
</nav>
Bootstrap 4段<p>有底部边距。使用mb-0类来删除它。
<p style="padding-right: 0.5em; padding-left: 0.5em;" class="my-0"> or </p>
https://www.codeply.com/go/n337ATFcOh https://www.codeply.com/go/n337ATFcOh
您可以利用以下方法大大简化标记和 CSSBootstrap 导航栏或导航 https://getbootstrap.com/docs/4.3/components/navbar/。也没有理由使用嵌套容器 https://getbootstrap.com/docs/4.3/layout/overview/#containers.
https://www.codeply.com/go/ZiTM3iuHrd https://www.codeply.com/go/ZiTM3iuHrd
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
