将复选框与输入字段和标签垂直对齐

Question

我有一个用 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 class="App">
            <form action="#">
                <div class="settings">
                    <div class="form-control">
                        <div class="row"><label for="firstName">First Name</label><input name="firstName" id="firstName"
                                class="input-field" type="text" placeholder="First Name" value=""></div>
                    </div>
                    <div class="form-control">
                        <div class="row"><label for="lastName">Last Name</label><input name="lastName" id="lastName"
                                class="input-field" type="text" placeholder="Last Name" value=""></div>
                    </div>
                    <div class="form-control">
                        <div class="row"><label for="age">Age</label><input name="age" id="age" class="input-field"
                                type="text" placeholder="Age" value="" style="border-color: red;"></div>
                        <div class="error">age is a required field</div>
                    </div><label class="checkbox" for="employed">Employed<input type="checkbox" name="employed"
                            label="Employed" id="employment" value="false"></label>
                    <div class="form-control">
                        <div class="row"><label for="favoriteColor">Favorite Color</label><select name="favoriteColor"
                                id="favoriteColor" class="select-field">
                                <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 class="form-control">
                        <div class="column">
                            <div class="checkboxGroup-wrapper"><label>Sauces</label>
                                <div class="checkbox-wrapper">
                                    <div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
                                            value="ketchup"><label for="ketchup">Ketchup</label></div>
                                    <div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
                                            value="mustard"><label for="mustard">Mustard</label></div>
                                    <div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
                                            value="mayonnaise"><label for="mayonnaise">Mayonnaise</label></div>
                                    <div class="checkboxes"><input type="checkbox" id="sauces" name="sauces"
                                            value="guacamole"><label for="guacamole">Guacamole</label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-control">
                        <div class="radioButtons-column">
                            <div class="radioButtonsGroup-wrapper"><label>Best Stooge</label>
                                <div class="radioButtons-wrapper">
                                    <div class="radioButtons"><input type="radio" id="stooge" name="stooge"
                                            value="larry"><label for="larry">Larry</label></div>
                                    <div class="radioButtons"><input type="radio" id="stooge" name="stooge"
                                            value="moe"><label for="moe">Moe</label></div>
                                    <div class="radioButtons"><input type="radio" id="stooge" name="stooge"
                                            value="curly"><label for="curly">Curly</label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-control">
                        <div class="row"><label for="notes">Notes</label><textarea name="notes" id="notes"
                                class="notes-field" placeholder="Notes" style="border-color: red;"></textarea></div>
                        <div class="error">notes is a required field</div>
                    </div><button type="button" class="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; */
}

提前致谢！

Answer 1

根据你想要达到的最终结果，我认为你应该给所有的标签你有相同的宽度，这样输入就可以调整到这些标签的左边。

这是一个示例：

<!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 class="field">
    <label class="label">First name</label>
    <input type="text"/>
  </div>
  <div class="field">
    <label class="label">last name</label>
    <input type="text"/>
  </div>
  <div class="field">
    <label class="label" for="favoriteColor">Favorite Color</label>
    <select name="favoriteColor" id="favoriteColor" class="select-field">
      <option value=""></option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="brown">Brown</option>
    </select>
  </div>
  <div class="field">
       <label class="label">Sauces</label>
        <div class="checkbox-wrapper">
            <div class="checkboxes">
              <input type="checkbox" id="sauces" name="sauces" value="ketchup">
              <label for="ketchup">Ketchup</label>
            </div>
            <div class="checkboxes">
              <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 容器中并居中，

将复选框与输入字段和标签垂直对齐

Align vertically checkboxes with the input fields and labels

javascript

css

forms

reactjs