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

Question

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

Answer 1

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>