在html / css导航栏中对齐输入/按钮

Question

我对html和css相当新，我无法在导航栏中居中登录。我尝试过使用vertical-align，margin和其他很多东西。即使我似乎让按钮的输入以边距为中心，它也会将另一个元素拉出位置。我需要输入和按钮在我的标题中垂直居中并相互垂直对齐。

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>

Answer 1

Flexbox非常方便：

.login {
  display: flex;
  align-items: center;
}

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将header div.login的margin-top更改为5 px

header div.login {
  float: right;
  margin-top: 5px;
}

编辑：以下是代码的完整摘录

https://jsfiddle.net/master4709/jacbf6r1/