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-在-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

文本框未對齊，因爲您在每個文本之前都有文本。我建議使用一個表，然後使用CSS來確保沒有行/列提綱

<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更多的幫助！

來源

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中。一個class屬性添加到具有相同類名的每個格，添加以下樣式到類：

display: inline-block;（這將顯示在同一行input元素的標籤）
添加width任何你想要它成爲。在我的例子我使它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表單對齊文本框

回答

相關問題