html 如何使窗体居中而不移动窗体前面的文本?

vbopmzt1  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在用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>
6jygbczu

6jygbczu1#

您只需添加左边距和右边距并将其设置为自动:

form { 
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  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>

相关问题