CSS/HTMLフォームのテキストボックスの整列

私は同じ行のテキストボックスを照らすためにCSSとHTMLに問題があります。現在、それらは整列していないことを意味します。助けて説明していただけますか？

<!DOCTYPE html> 

<html> 
<style> 
.input1:focus { 
background-color: yellow; 
} 
.input1:hover { 
background-color: cyan; 
} 
</style> 

<body> 
<form> 
First name: <input class="input1" type="text" name="firstname"><br> 
Last name: <input class="input1" type="text" name="lastname"><br> 
E-mail Address: <input class="input1" name = "email" placeholder =  "[email protected]"> 

<p> 
<input type = "submit" value = "Submit Form"> 
<input type = "reset" value = "Reset button"> 
</p> 

</form> 

</body> 
</html>

出典

2017-02-16 Paul

[CSSでフォーム要素を揃え]（http://stackoverflow.com/questions/13204002/align-form-elements-の可能性のある重複作らin-css） – languitar

あなたはfloat: left;とfloat: right;を使用することができます。ここには良いリソースhttps://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_oldがあります。

出典

2017-02-16 16:21:07 pudility

テキストボックスの前にテキストがあるため、テキストボックスが揃っていません。私は

<form> 
<table> 
<tr><td>First name:</td> <td><input class="input1" type="text" name="firstname"></td></tr> 
<tr><td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td></tr> 
<tr><td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder =  "[email protected]"></td></tr> 

<tr> 
<td><input type = "submit" value = "Submit Form"></td> 
<td><input type = "reset" value = "Reset button"></td> 
</tr> 
</table>  
</form>

は、より多くの助けのためhttps://www.w3schools.com/html/html_tables.aspを参照してください何の行/列のアウトライン

はありませんことを確認するためにCSSを使用して、テーブルを使用することをお勧め、と思います！

出典

2017-02-16 16:22:57

HTML

<form> 
<table><tr> 
<td>First name:</td> <td><input class="input1" type="text" name="firstname"></td> 
<td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td> 
<td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder =  "[email protected]"></td></tr> 

</table> 
<div class="makeCenter"> 
<input type = "submit" value = "Submit Form"> 
<input type = "reset" value = "Reset button"> 
</form>

CSS私の推測によると、あなたはこれを期待しなければならない

.makeCenter{ 
    text-align:center; 
    width:100%; 
    padding:20px 0 0 0; 
} 
input[type=submit]{ 
    margin-right:20px; 
}

！

出典

2017-02-16 16:42:05 Venky

divsにラベルをラップします。、同じクラス名を持つ各div要素にclass属性を追加し、そのクラスに次のスタイルを追加します。

display: inline-block;
あなたがそれを好きなwidthを追加します（これはinput要素と同じ行にラベルを表示）することが。私の例では、私はそれ120px

.input1:focus { 
 
    background-color: yellow; 
 
} 
 
.input1:hover { 
 
    background-color: cyan; 
 
} 
 
.label { 
 
    display: inline-block; 
 
    width: 120px; 
 
}

<form> 
 
<div class="label">First name:</div> <input class="input1" type="text" name="firstname"><br> 
 
<div class="label">Last name:</div> <input class="input1" type="text" name="lastname"><br> 
 
<div class="label">E-mail Address:</div> <input class="input1" name = "email" placeholder =  "[email protected]"> 
 

 
<p> 
 
<input type = "submit" value = "Submit Form"> 
 
<input type = "reset" value = "Reset button"> 
 
</p> 
 

 
</form>

出典

2017-02-16 16:50:36 Anthony

CSS/HTMLフォームのテキストボックスの整列

答えて

関連する問題