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

Answer 2

我一般不喜欢在同一位置执行两种动作的两种形式。假设您不需要将用户名和密码发送到您的注册页面，那么我将执行以下操作：

<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">
        <a href="registro.html" id="register" title="Registrar">Registrar</a>
    </form>
</section>

按钮CSS：

/* 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: inline-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: inline-block;
    margin-top: 10px;
}

HTML + CSS：如何将这两个按钮垂直放置在同一级别

2 个答案: