HTML+CSS : How do I put this 2 buttons at the same level vertically

Question

我想将这两个按钮(登录和注册器)对齐在同一级别，但由于它们的形式不同，“注册器”按钮被放置在“下一行”。

这是视觉上的问题:

代码如下:

HTML

<section class="header_form_login">
    <form action="index2.html" method="GET">
        <label for="user">Usuario:<br></label>
        <input type="text" id="user" name="user_input">
        <label for="pass"><br>Contraseña:<br></label>
        <input type="text" id="pass" name="pass">
        <input type="submit" id="login" value="Login">
    </form>
    <form action="registro.html" method="GET">
        <input type="submit" id="register" value="Registrar">
    </form>
</section>

CSS:

header > section.header_form_login{
    font-weight: 500;
    align-items: right;
    padding: 5px;
    margin: auto;
    margin-right: 20px;
}

header > section.header_form_login > form > input#user{
    width: 200px;
    height: 24px;
    border: 1px solid lightgray;
}

header > section.header_form_login > form > input#pass{
    width: 200px;
    height: 24px;
    border: 1px solid lightgray;
}

    /* BUTTONS */
    header > section.header_form_login > form > input#login{
        border: none;
        background-color: #CAB99F;
        color: black;
        font-weight: 500;
        font-family: 'Roboto';
        font-size: 15px;
        text-decoration: none;
        padding: 10px 20px;
        cursor: pointer;
        display: block;
        margin-top: 10px;
    }

    header > section.header_form_login > form > input#register{
        border: none;
        background-color: #CAB99F;
        color: black;
        font-weight: 500;
        font-family: 'Roboto';
        font-size: 15px;
        text-decoration: none;
        padding: 10px 30px;
        cursor: pointer;
        display: flex;
        float: right;
        margin-top: 10px;
    }

非常感谢!!!

PD:请随意给我建议，我对 html 和 css 编码有点陌生。

我需要 html 和 css 方面的帮助，特别是将按钮垂直放置在同一水平但来自不同的形式

Answer 1

更新:重构 CSS 以共享样式。

我会重组您的 HTML 并修复您的 CSS 以使一切正常运行。此外，在使用 id 时，它们应该是唯一的，因此不需要像这样的长查找查询:

header > section.header_form_login > form > input#login { … }

就用

#login { … }

为了使“button”对齐，我将寄存器 input 设为链接。这是非常标准的。然后我添加了一些 CSS 以将这些元素对齐在同一行上。

.form-buttons {
  display: flex;
  flex-wrap: nowrap;
}

以下是我如何重构您的标记和样式。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header_form_login {
  font-weight: 500;
  padding: 5px;
  margin: auto;
  width: 250px;
  max-width: 100%;
}

#user,
#pass {
  width: 100%;
  padding: 5px;
  border: 1px solid lightgray;
}

/* BUTTONS */

#login,
#register {
  border: none;
  background-color: #CAB99F;
  color: black;
  font-weight: 500;
  font-family: 'Roboto';
  font-size: 15px;  
  text-decoration: none;
  padding: 10px 20px;
  cursor: pointer;  
  text-align: center;
  flex: 1;  
}

#login {
  margin-right: 2.5px;  
}

#register {
  margin-left: 2.5px;
}

.form-buttons {
  padding-top: 10px;
  display: flex;
  flex-wrap: nowrap;
}

<section class="header_form_login">
  <form action="index2.html" method="GET">
    <label for="user">Usuario:<br></label>
    <input type="text" id="user" name="user_input">
    <label for="pass">Contraseña:</label>
    <input type="text" id="pass" name="pass">
    <div class="form-buttons">
      <input type="submit" id="login" value="Login">
      <a href="registro.html" id="register">Register</a>
    </div>
  </form>
</section>

jsFiddle