0

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Learning</title>
    </head>
    <body>

        ...

<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp"  method="post" action="">
<fieldset>
    <div>
        <label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
     </div> 

    <div>     
        <label>Email:</label><input id="EMAIL"  type="email" name="email" required>
    </div>
    <div>
        <label></label><input type="submit" value="Send" >
    </div>
</fieldset>

</form>
</body>
</html>

CSS

body {
    background-color:#b0c4de;
    font-family:"Times New Roman";
    font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label { 
    display: inline-block; 
    width: 150px;
    text-align: right;
    margin-right:30px;  //How far the label element and input box
    margin-top:100px;
 }
fieldset{
    //border:none;
    padding:15px;
    width:500px;
    margin:0px auto;
}

Name: と入力ボックスは 1 行にあり、次の行はそれに接しています。

どうすればそれらを分離できますか。

4

4 に答える 4

2

以下line-heightのように a を追加します。div

div{
    line-height: 30px;
}

フィドル

注:divここでは、単なる例であるため、一般的なタグのプロパティを適用しました。実際には、 内classのdivタグに を追加して、そのクラスにのみ をfieldset適用することをお勧めします。line-heightそのようにすることdivで、ページ内の他のタグが影響を受けないようにすることができます。

于 2013-09-19T10:00:24.367 に答える
1

以下の CSS をコードに追加します

div{
  margin-top:10px;
}

必要に応じてマージンを変更できます。

于 2013-09-19T10:03:20.400 に答える
1

複雑になりすぎずに、次のような単純なもので目的の結果が得られます

#NAME, #EMAIL, input[type=submit] {
  margin-top:5px;
}

これにより、入力フィールドの上に小さなスペースができ、それらが分散されます。

注：特定のセレクターを使用して、これらの値を例のフィールドにのみ適用しました。

于 2013-09-19T10:00:38.087 に答える
-1

これを実装するには多くの方法があります。最も簡単な方法は、ラベルと入力タグの間に < BR > を挿入することです。

2 番目の方法は、表を使用して下のセルに入力を配置することです。

別の方法として、たとえば div を使用してラベルを 1 つの div に配置し、入力を別の div に配置して、float などの CSS 手法を使用することもできます。これには、CSS を介してすべてを制御できるという利点があります。

于 2013-09-19T10:01:22.970 に答える