0

小さなログインフォームを作成しました。残念ながら、添付のスクリーンショットに示されているように、入力の右側の境界線は表示されません。 ここに画像の説明を入力してください

この投稿の提案に基づいて、入力をラベルの右側に配置し、残りのスペースを使用するように作成しました。

HTML：

<div id="wrapper">
    <form id="loginform">
        <label for="username">Username:</label>
        <span><input name="username" id="username" type="text" autofocus /></span>

        <label for="password">Password:</label>
        <span><input name="password" id="password" type="password" /></span>

        <input id="loginBtn" type="submit" name="submit" value="Login" />
    </form>
</div>

CSS：

#wrapper {
    height: auto;
    background-color: #dfe9f6;
    margin: 40px 8px 8px 8px;
    padding: 8px;
    border: 1px solid #99bce8;
}
span {
    margin-bottom: 8px;
    display: block;
    overflow: hidden;
}
label, input {
    height: 17px;
}
label {
    float: left;
    width: 80px;
}
input {
    border: 1px solid #abadb3;
    width: 100%;
}
input[type="submit"] {
    height: 22px;
}

（そうではない）JSFiddleでの実例：http：//jsfiddle.net/kN4wa/1/

Firefox19とChrome25でテストしましたが、助けていただければ幸いです。

ありがとう

4

2 に答える 2

2

単に追加する

input {
    border: 1px solid #abadb3;
    -moz-box-sizing: border-box; /* partially supported */
    box-sizing: border-box; /* here is what I added */
    width: 100%;
}
于 2013-03-21T21:31:53.300 に答える
1

入力しました{幅：100％; }したがって、境界線はこの幅に追加され、親の幅よりも高くなります。そのため、境界線は表示されません。幅にする：99.5％; または、代わりに99％だけです。または入力に追加box-sizing: border-box;します。

ベンダープレフィックス付き：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
于 2013-03-21T21:29:28.733 に答える