Question

我正在尝试构建一个登录表单，但是提交按钮，记住我的复选框，并记住我的标签没有正确格式化。目前，标签位于左侧，然后是提交按钮和复选框。我希望它能在提交按钮后显示标签和复选框。我正在使用Jade作为模板引擎。我还希望该解决方案能够在移动浏览器上正常运行。

Jade
doctype html
html
head
    title
        | Log In
    meta(charset = "UTF-8")
    meta(name = "viewport" content = "width = device-width, initial-scale = 1.0")
    link(rel = "stylesheet", href="/stylesheets/login.css")
body
    form#logIn(name = "logIn", method = "post", action = "/login")
        p#loginMessage Title
        label(for = "handle") Username:
        input#handle(type = "text", required = "required", name = "handle" maxlength = "20" value = handle)
        br
        br
        label(for="pass") Password:
        input#password(type = "password", required = "required", maxlength = "60" name = "pass")
        br
        br
        div#submitDiv
            button#submit(name = "submit") SUBMIT!
            label#rememberMe(for = "rememberMeCheckbox") Remember Me:
        input#rememberMeCheckbox(type = "checkbox", name = "remember")
        br
        br
        div#errorMessage #{errorMessage}


CSS

#loginMessage {
font-size: 30px;
text-align: center;
color: #FFFFFF;
}
form {
    font-weight: bold;
    font-family: courier;
    font-size: .875em; /*14*/
    margin: auto;
    width: 90%;
    height: 80%;
    border: 1px solid #FBFF06;
    background: #EFBA00;
    -webkit-border-radius: 3.125em; /*50*/
    -moz-border-radius: 3.125em;
    border-radius: 3.125em;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);

}
label {
    display: block;
    float: left;
    width: 15%;
    padding-left: 3%;
    padding-right: 3%;
}
input[type="text"], input[type="password"] {
    width: 50%;
}
#errorMessage {
    font-weight: bold;
    font-family: courier;
    font-size: 1em;
    text-align: center;
}
div#submitDiv {
    text-align: center;
    display: inline;
}
button#submit {
    width: 10%;
    background: #FBFF06;
    color: #000000;
    border: 2px solid #BC8507;
    height: 25px;
    font-weight: bold;
}
label#rememberMe {
    width: 15%;
}
input#rememberMeCheckbox {
    width: 10px;
    margin: 0 auto;
}

Answer 1

您的标签应用了浮动：左侧样式，这就是为什么它的显示顺序与HTML不同。您需要删除该标签的浮动并将其显示为内联，以使所有内容保持在同一行。

label#rememberMe {
    width: 10%;
    float: none;
    display: inline;
}

检查这个小提琴：http://jsfiddle.net/ap68p5zg/1/

我还在“提交”按钮中添加了一个最小宽度，因此它不会切断文本和对齐边距。

button#submit {
    width: 10%;
    background: #FBFF06;
    color: #000000;
    border: 2px solid #BC8507;
    height: 25px;
    font-weight: bold;
    margin-left: 3%;
    min-width: 75px;
}

登录表单样式

1 个答案: