我有一個用 react 和 formik 創建的表單，問題是我不能像樣機中所示的那樣居中元素。
應該是這樣的：
但我有這個結果：
有人可以幫我嗎？我不明白我做錯了什么。
我將輸入居中，但帶有單選按鈕的標簽和復選框沒有對齊，我試過：
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
vertical-align: baseline;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
但它什么也沒做，只有這個有效：
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
display: block;
width: 400px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
/* margin-bottom: 20px; */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
HTML結構：
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div >
<form action="#">
<div >
<div >
<div ><label for="firstName">First Name</label><input name="firstName" id="firstName"
type="text" placeholder="First Name" value=""></div>
</div>
<div >
<div ><label for="lastName">Last Name</label><input name="lastName" id="lastName"
type="text" placeholder="Last Name" value=""></div>
</div>
<div >
<div ><label for="age">Age</label><input name="age" id="age"
type="text" placeholder="Age" value="" style="border-color: red;"></div>
<div >age is a required field</div>
</div><label for="employed">Employed<input type="checkbox" name="employed"
label="Employed" id="employment" value="false"></label>
<div >
<div ><label for="favoriteColor">Favorite Color</label><select name="favoriteColor"
id="favoriteColor" >
<option value=""></option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
<option value="grey">Grey</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="pink">Pink</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="beige">Beige</option>
<option value="navy blue">Navy blue</option>
<option value="maroon">Maroon</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
<option value="aqua">Aqua</option>
</select></div>
</div>
<div >
<div >
<div ><label>Sauces</label>
<div >
<div ><input type="checkbox" id="sauces" name="sauces"
value="ketchup"><label for="ketchup">Ketchup</label></div>
<div ><input type="checkbox" id="sauces" name="sauces"
value="mustard"><label for="mustard">Mustard</label></div>
<div ><input type="checkbox" id="sauces" name="sauces"
value="mayonnaise"><label for="mayonnaise">Mayonnaise</label></div>
<div ><input type="checkbox" id="sauces" name="sauces"
value="guacamole"><label for="guacamole">Guacamole</label></div>
</div>
</div>
</div>
</div>
<div >
<div >
<div ><label>Best Stooge</label>
<div >
<div ><input type="radio" id="stooge" name="stooge"
value="larry"><label for="larry">Larry</label></div>
<div ><input type="radio" id="stooge" name="stooge"
value="moe"><label for="moe">Moe</label></div>
<div ><input type="radio" id="stooge" name="stooge"
value="curly"><label for="curly">Curly</label></div>
</div>
</div>
</div>
</div>
<div >
<div ><label for="notes">Notes</label><textarea name="notes" id="notes"
placeholder="Notes" style="border-color: red;"></textarea></div>
<div >notes is a required field</div>
</div><button type="button" id="resetButton" disabled="">Reset</button><button
type="submit" id="submitButton" disabled="">Submit</button>
<div style="margin: 1rem 0px;">
<h3 style="font-family: monospace;"></h3>
<pre style="background: rgb(246, 248, 250); font-size: 0.65rem; padding: 0.5rem;">{
"firstName": "",
"lastName": "",
"age": "",
"employed": false,
"favoriteColor": "",
"sauces": [],
"stooge": "",
"notes": ""
}</pre>
</div>
</div>
</form>
</div>
</div>
</body>
CSS：
<style>.App {
display: flex;
justify-content: center;
}
.error {
color: red;
}
.form-control{
line-height: 42px
}
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
display: block;
width: 400px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
/* margin-bottom: 20px; */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
vertical-align: baseline;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.input-field {
}
.row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.select-field{
/* padding-right: 20px ; */
}
div.error{
display: flex;
align-items: center;
justify-content: flex-end;
margin-top:-15px;
}
.notes-field{
}
.column{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.checkboxGroup-wrapper{
display: flex; /* establish flex container */
flex-direction: row; /* make main axis vertical */
}
.checkbox-wrapper{
/* width: 300px; */
/* margin: 5px; */
margin-left: 20px;
}
.radioButtons-column{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.radioButtonsGroup-wrapper{
display: flex; /* establish flex container */
flex-direction: row; /* make main axis vertical */
}
.radioButtons-wrapper{
/* margin-left: 20px; */
}
提前致謝！
uj5u.com熱心網友回復：
根據您想要達到的最終結果，我認為您應該給所有具有相同寬度的標簽，以便輸入可以調整到這些標簽的左側。
這是一個示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>Document</title>
</head>
<body>
<div >
<label >First name</label>
<input type="text"/>
</div>
<div >
<label >last name</label>
<input type="text"/>
</div>
<div >
<label for="favoriteColor">Favorite Color</label>
<select name="favoriteColor" id="favoriteColor" >
<option value=""></option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="brown">Brown</option>
</select>
</div>
<div >
<label >Sauces</label>
<div >
<div >
<input type="checkbox" id="sauces" name="sauces" value="ketchup">
<label for="ketchup">Ketchup</label>
</div>
<div >
<input type="checkbox" id="sauces" name="sauces"
value="mustard">
<label for="mustard">Mustard</label>
</div>
</div>
</div>
</body>
</html>
風格 ：
.field {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
}
.label {
width: 130px;
display: inline-block;
}
所有標簽都應位于左側并具有相同寬度的寬度，對于按鈕，您可以將它們放在 flex 容器中并將它們居中，
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/422169.html
標籤：