CSS/HTML Formular Textfelder ausrichten

Ich bin neu auf der Website.CSS/HTML Formular Textfelder ausrichten

Ich habe ein Problem in CSS und HTML, um die Textfelder in der gleichen Zeile zu beenden. Das bedeutet, dass sie derzeit nicht ausgerichtet sind. Könnten Sie bitte helfen und erklären?

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

Quelle

2017-02-16 Paul

Mögliche Duplikat [ausrichten Formularelemente in CSS] (http://stackoverflow.com/questions/13204002/align-form-elements- in-css) – languitar

können Sie float: left; und float: right; verwenden. Hier ist eine gute Ressource https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old.

Quelle

2017-02-16 16:21:07 pudility

Die Textfelder sind nicht ausgerichtet, da vor jedem Text Text vorhanden ist. Ich würde vorschlagen, eine Tabelle, und dann CSS verwenden, um sicherzustellen, dass es keine Zeile/Spalte Umriss

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

für weitere Hilfe zu https://www.w3schools.com/html/html_tables.asp finden!

Quelle

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; 
}

Nach meiner Vermutung, müssen Sie dies erwartet werden!

Quelle

2017-02-16 16:42:05 Venky

Wickeln Sie Ihre Etiketten in divs. Fügen Sie ein class Attribut zu jedem div mit dem gleichen Klassennamen, fügen Sie den folgenden Stil zu dieser Klasse:

display: inline-block; (dies zeigt die Etiketten auf der gleichen Linie wie die input Elemente)
hinzufügen width was auch immer Sie es wollen sein. In meinem Beispiel habe ich es 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>

Quelle

2017-02-16 16:50:36 Anthony

CSS/HTML Formular Textfelder ausrichten

Antwort

Verwandte Themen