0

私はCSSにあまり詳しくないので、ログインフォームに境界線を適用しようとしています。使用するコードは次のとおりです。

login.html：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<div id="login_container">
    <form action="#" method="POST">
        <div class="row">
            <label for="username" class="label">Username</label>
            <input type="text" class="field" name="username" />
        </div>
        <div class="row">
            <label for="password" class="label">Password</label>
            <input type="password" class="field" name="password" />
        </div>
    </form>
</div>

css / style.css：

#login_container {
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border:1px solid black;
    display:block;
}

.field {
    float:right;
    margin-left: 10px;
}

label {
    float:left;

}

.row{
    display:block;
    clear:both;
}

および出力：

前のコードの出力

境界線がパスワードテキストフィールドと交差するのはなぜですか？

編集：

フォーム付き{border：1px solid black; }

出力は次のとおりです。

代わりにフォームの境界線を使用して出力しますog#login_containerborder

4

1 に答える 1

2

divに追加overflow:auto;します。#login_container

jsFiddleの例

内部要素はフロートしているため、オーバーフロープロパティを指定して、境界を元に戻す必要があります。

于 2013-01-22T01:29:01.340 に答える