Question

所以这是我对我的页面的HTML标记：

<div id="portal-central">
        <div id="portal-central-login">
          <form method="post" action="index.php">
            <input id="login_username" name="username" type="text" value="firstname_lastname" onBlur="if(this.value == '') this.value = 'firstname_lastname'" onFocus="if(this.value == 'Firstname_Lastname') this.value = ''" required />
            <input id="login_password" name="password" type="password" value="Password" onBlur="if(this.value == '') this.value = 'password'" onFocus="if(this.value == 'Password') this.value = ''" required />

            <input type="submit" value="Log In" />
          </form>
        </div>
      </div>

这是我的CSS：

#container {
  height: 100%;
  display: flex;
}

#portal-central {
  height: 192px;
  width: 100%;
  margin: auto;
  background-color: #ffffff;
    box-sizing: border-box;
    border-top: 10px solid #65825f;
    border-bottom: 10px solid #65825f;
}

#portal-central-login {
    height: 152px;
    width: 300px;
    margin: auto;
    position: absolute;
    top: 60px; left: 0; bottom: 0; right: 0;
}

#portal-central-login form {
        display: inline-block;
        text-align: center;
}

#portal-central-login input {
    margin-bottom: 10px;
    text-align: center;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    color: #b5b5b5;
}

#portal-central-login input[type=text] {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-family: 'Open Sans', sans-serif;
}

#portal-central-login input[type=password]{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-family: 'Open Sans', sans-serif;
}

#portal-central-login input[type=submit]{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-family: 'Open Sans', sans-serif;
}

出于某种原因，提交输入会粘贴在密码文本字段的旁边，并且它开始让我感到有点兴奋。我一直绞尽脑汁想弄清楚什么是错的，但我很难过，所以我正在寻找一些指导。

如下所示：

Answer 1

input个元素默认为inline elements。这意味着他们将共享同一条线，除非受到其他条件的影响。

只需将input更改为block elements，每个人都有自己的行。

将此添加到您的CSS：

input { display: block; }

DEMO：http://jsfiddle.net/yt6joz9j/

更新（基于评论）

要保持表单居中，只需使用flexbox即可。删除上面的代码并进行此调整：

#portal-central-login form {
    /* display: inline-block; */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

DEMO：http://jsfiddle.net/yt6joz9j/1/

input元素不会破坏到新行;与另一个输入保持在同一行

1 个答案: