我正在努力使导航项居中并且快速登录表单与导航栏的右侧对齐,我尝试了 float: right 但是将其添加到下一行,显示:inline-block也没有快乐。
我是不是遗漏了一些非常明显的东西,或者仅使用 HTML 和 CSS 很难实现。
谢谢
如有任何帮助,我们将不胜感激。
nav#navBar {
text-align: center;
margin-top: -8px;
margin-left: -8px;
border-bottom: 2px solid #191919;
}
nav#navBar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav#navBar ul li {
font-weight: 600;
font-size: 14px;
margin-top: 5px;
display: inline-block;
font-family: 'Raleway';
font-variant: small-caps;
}
nav#navBar ul li a, visited {
color: #191919;
text-decoration: none;
padding: 25px;
display: block;
}
nav#navBar ul li a:hover {
color: grey;
margin-bottom: -2px;
border-bottom: 2px solid grey;
}
nav#navBar ul.loginForm {
display: inline-block;
float: right;
}
<nav id="navBar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONTENT</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<ul class="loginForm">
<form>
<input type="text" placeholder="Insert username" />
<input type="password" placeholder="Insert password" />
<button type="submit">Login</button>
</form>
</ul>
</nav>
最佳答案
您可以如下更改 css。
nav#navBar {
margin-top: -8px;
margin-left: -8px;
border-bottom: 2px solid #191919;
display: table;
width: 100%;
}
nav#navBar ul {
list-style-type: none;
padding: 0;
margin: 0;
display: table-cell;
vertical-align: middle;
}
nav#navBar ul li {
font-weight: 600;
font-size: 14px;
margin-top: 5px;
display: inline-block;
font-family: 'Raleway';
font-variant: small-caps;
}
nav#navBar ul li a, visited {
color: #191919;
text-decoration: none;
padding: 25px;
display: block;
}
nav#navBar ul li a:hover {
color: grey;
margin-bottom: -2px;
border-bottom: 2px solid grey;
}
nav#navBar ul.loginForm {
display: table-cell;
vertical-align: middle;
text-align: right;
padding-right: 25px;
}
并且html没有变化。
关于html - 将登录表单 float 到导航右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54469576/