我认为这是因为display: flex;，我如何使标签与复选框位于同一行？为什么复选框没有居中？
.options_display {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.options_style * {
text-align: center;
font-size: medium;
font-family: arial;
padding: 0px;
margin-bottom: 2px;
width: 225px;
height: 25px;
}
* {
box-sizing: border-box;
}
p {
margin: 0px;
}
[hidden] {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Kalkulačka</title>
<link rel="stylesheet" href="Style/Main.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div class="options_display options_style">
<select>
<option>Select test</option>
<option>Option 0</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<input type="number" placeholder="Input test">
<div style="display: inline;">
<input type="checkbox" id="test">
<label for="test">Test</label>
</div>
<button onclick="">Button test</button>
<p>Text</p>
</div>
</div>
</div>
</body>
</html>为什么标签不在复选框内？
这是因为.options_style *中的样式规则同时应用于标签和复选框，该样式规则指定了它们应用到的元素的宽度。因此，在这种情况下，复选框和标签都具有225px宽度，并且由于它们的父级具有display: inline宽度，而元素不是内联的，并且宽度大于容器，其中一个必须转到新行。快速解决方法是将display: inline更改为display: flex，并将标签和复选框的width属性设置为auto。但为了让它更好一点，我还在下面的代码中添加了一些样式改进。
.options_display {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.options_style * {
text-align: center;
font-size: medium;
font-family: arial;
padding: 0px;
margin-bottom: 2px;
width: 225px;
height: 25px;
}
* {
box-sizing: border-box;
}
p {
margin: 0px;
}
[hidden] {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Kalkulačka</title>
<link rel="stylesheet" href="Style/Main.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div class="options_display options_style">
<select>
<option>Select test</option>
<option>Option 0</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<input type="number" placeholder="Input test">
<div style="display: flex;margin: 0 auto;justify-content: center;align-items: center;">
<input type="checkbox" id="test" style="width: auto">
<label for="test" style="width: auto; height: auto">Test</label>
</div>
<button onclick="">Button test</button>
<p>Text</p>
</div>
</div>
</div>
</body>
</html>.options_style option {
text-align: center;
font-size: medium;
font-family: arial;
padding: 0px;
margin-bottom: 2px;
width: 225px;
height: 25px;
}
应用上述类别"；。options_ style"仅限于"；选项"；的"；选择"；元素的所有内容；div"；要素