Question

如何使输入元素与div元素具有相同的大小和对齐方式？（facebookLoginButton和standardLoginButton）

HTML code：

<header>
    <div id="topPane">
            <h1 id="georgeLogo">G.</h1>

        <div id="login">
            <div id="facebookLoginButton">Continue with Facebook</div>
            <br class="lb">
            <div class="center">or</div>
            <br class="lb">
            <form id="loginForm">
                <input type="text" placeholder="Email Address" required>
                <br>
                <input type="text" placeholder="Password" required>
            </form>
            <div id="standardLoginButton">Login</div>
        </div>
</header>
<div id="bottomPane"></div>

Jsfiddle http://jsfiddle.net/0013v9yj/

Answer 1

在css中，将相同的样式应用于输入...并将display：block添加到输入

将最后一个css块更改为此（仅在媒体查询中添加了输入大小，您只在最后一个中添加了它）

/*********************
MEDIA QUERIES
*********************/
@media only screen and (min-width: 0px) and (max-width: 480px) {
    #georgeLogo {
        font-size: 6em;
    }
    #facebookLoginButton, #standardLoginButton, #loginForm input  {
        font-size: 1.5em;
        width: 12.5em;
    }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    #georgeLogo {
        font-size: 7em;
    }
    #facebookLoginButton, #standardLoginButton, #loginForm input  {
        font-size: 1.5em;
        width: 15em;
    }
}
@media only screen and (min-width: 769px) {
    #georgeLogo {
        font-size: 8em;
    }
    #facebookLoginButton, #standardLoginButton, #loginForm input {
        font-size: 2em;
        width: 15em;
    }
    #loginForm {
        width: 15em;
    }
}

Answer 2

所以你的问题是你使用的是em而不是rem或像素。

em与其父级相关，因此这可能会让数学混乱。如果你有一个大小为1.2em的li并在其中嵌入另一个li，它实际上会得到1.2×1.2 = 1.44em的字体大小。

rem不是与其父级相关，而是与documnet的根相关（默认为16px）。但是，请记住IE不支持rem＆lt; 9。

在您的代码中，15 em是您的表单和facebookLoginButton的不同宽度，因为您不断更改父级的font-size / em。

使输入元素与div的大小相同

2 个答案: