我正在用PHP开发一个表单,到目前为止看起来还不错,但是我想让它们在中间排成一行。现在它把整个表单放在中间,文本在表单之前。
我想把窗体移到中间,它们现在居中,但并不完全像我想的那样。我只想让窗体自己排成一行,但我还没有找到任何这样做的代码。
form {
display: inline-block;
text-align: left;
}
input[type=text], select {
width: 400px;
height: 40px;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid #333;
border-radius: 4px;
box-sizing: border-box;
}
input[type=email], select {
width: 400px;
height: 40px;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid #333;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
resize: none;
position:static;
overflow: auto;
width: 400px;
height: 100px;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid #333;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 400px;
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #c29bb8;
}
<form action="submitform.php" method="post">
<label for="voornaam">Voornaam:</label>
<input type="text" id="voornaam" onfocus="this.value=''" value="Vul hier je voornaam in..."><br><br>
<label for="tussenvoegsel">Tussenvoegsel:</label>
<input type="text" id="tussenvoegsel" onfocus="this.value=''" value="Vul hier eventueel een tussenvoegsel in..."><br><br>
<label for="achternaam">Achternaam:</label>
<input type="text" id="achternaam" onfocus="this.value=''" value="Vul hier je achternaam in..."><br><br>
<label for="mail">E-mail:</label>
<input type="email" id="mail" onfocus="this.value=''" value="Vul hier je e-mail in..."><br><br>
<label for="review">Review:</label>
<textarea id="review" name="review"></textarea><br><br>
<input type="submit" value="Verstuur">
</form>
1条答案
按热度按时间6jygbczu1#
您只需添加左边距和右边距并将其设置为自动: