我对 html 和 css 相当陌生,我无法将此登录集中在我的导航栏中。我尝试过使用垂直对齐、边距和许多其他东西。即使我似乎让按钮的输入以边距为中心,它也会将另一个元素拉出位置。我需要输入和按钮在我的标题本身垂直居中并相互垂直对齐。
ul {
margin: 0;
padding: 0;
}
header a.home {
background-color: #ff6961;
color: black;
}
header {
background-color: #222;
overflow: hidden;
}
header ul li {
list-style-type: none;
}
header ul li a {
text-decoration: none;
display: block;
padding: 18px 20px;
font-size: 17px;
text-align: center;
color: #f2f2f2;
float: left;
}
input {
background-color: #444;
border: 0;
padding: 10px 12px;
}
input,
select,
textarea {
color: #ff6961;
}
header div.login button {
font-size: 18px;
text-align: center;
background: #ff6961;
border: 0;
padding: 10px;
}
header div.login {
float: right;
margin-top: 10px;
}
<header>
<ul>
<li><a class="home" href="/index.php">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="login">
<input type="text" name="usr" placeholder="Username">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Submit</button>
</div>
</header>
<section>
<!-- Actual Site Code Here -->
</section>
Flexbox 在这方面很方便:
.login {
display: flex;
align-items: center;
}
ul {
margin: 0;
padding: 0;
}
header a.home {
background-color: #ff6961;
color: black;
}
header {
background-color: #222;
overflow: hidden;
}
header ul li {
list-style-type: none;
}
header ul li a {
text-decoration: none;
display: block;
padding: 18px 20px;
font-size: 17px;
text-align: center;
color: #f2f2f2;
float: left;
}
input {
background-color: #444;
border: 0;
padding: 10px 12px;
}
input, select, textarea {
color: #ff6961;
}
header div.login button {
font-size: 18px;
text-align: center;
background: #ff6961;
border: 0;
padding: 10px;
}
header div.login {
float: right;
margin-top: 10px;
}
.login {
display: flex;
align-items: center;
}
<header>
<ul>
<li><a class="home" href="/index.php">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="login">
<input type="text" name="usr" placeholder="Username">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Submit</button>
</div>
</header>
<section>
<!-- Actual Site Code Here -->
</section>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句