我正在尝试水平和垂直对齐这些单选按钮/复选框，我也希望文本位于它们的左侧。我尝试了一些诸如内联和块之类的东西，但我是相当初学者并且正在努力学习。 这是我的小项目的 HTML 和 CSS 代码。
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
body {
width: 100%;
height: 100%;
margin: 0;
background: #1b1b32;
color: white;
font-family: Consolas, serif;
font-size: 17px;
}
h1,
p {
margin: 20px auto;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
max-width: 1000px;
min-width: 300px;
padding-bottom: 2em;
padding-top: 1em;
background-blend-mode: color;
}
fieldset {
margin: auto;
padding: 20px;
border-radius: 30px;
border-color: #6b6b8d;
}
label {
display: block;
margin: auto;
text-align: left;
font-size: 16px;
padding-bottom: 10px;
width: 100%;
}
input,
textarea,
select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
margin: 10px 0 0 0;
border-radius: 20px;
border: 1px solid #0a0a23;
background-color: #0a0a23;
color: #ffffff;
text-indent: 5px;
}
.input-radio,
.input-checkbox {
display: block;
margin: auto;
min-height: 1.25rem;
min-width: 1.25rem;
}
.inline-field {
display: inline;
margin-bottom: 10px;
/* I added this after I posted my reply */
vertical-align: middle;
/* Fixes any weird issues in Firefox and IE */
}
.input-textarea {
display: block;
margin-left: auto;
margin-right: auto;
height: 120px;
text-indent: 5px;
}
.submit-button {
display: block;
width: 50%;
margin: 1em auto;
height: 30px;
font-size: 1.1rem;
background-color: #3b3b4f;
border-radius: 20px;
border-color: #6b6b8d;
min-width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Registration Form</title>
<link rel="stylesheet" href="survey.css">
</head>
<body>
<div class="container">
<h1 id="title">Pepe's Survey Form</h1>
<p id="description">Thank you for taking time to help us improve the platform</p>
<form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
<fieldset>
<label id="name-label">Enter your first name:<input class="form-control" id="name" type="text"
placeholder="Enter your name" required></label>
<label id="email-label">Email:<input class="form-control" id="email" type="email"
placeholder="Enter your email" required></label>
<label id="number-label">Age(optional)<input class="form-control" id="number" type="number"
placeholder="Enter your age" required min="18"
max="100"></label>
<label for="referrer">How did you hear about us?
<select class="dropdown" id="referrer" name="referrer">
<option disabled selected value>Select current trading style</option>
<option value="1">Intraday Trader</option>
<option value="2">Swing Trader</option>
<option value="3">Investor</option>
</select>
</label>
<div class="inline-field">
<label class="input-radio"><input class="input-radio" id="Yes" name="Yes-No" checked
type="radio" value="Yes">Yes</label>
<label class="input-radio"><input class="input-radio" id="No" name="Yes-No" type="radio"
value="No">No</label>
</div>
<label class="input-checkbox">What would you like to see improved?
<small>(Check all that apply)</small>
<input class="input-checkbox" type="checkbox" value="more-charts">More Charts
<input class="input-checkbox" type="checkbox" value="new-screener">New Screener
<input class="input-checkbox" type="checkbox" value="better-execution">Better execution speed
<input class="input-checkbox" type="checkbox" value="blog-page">Blog Page
</label>
<label>Any comments or suggestions?
<textarea class="input-textarea" id="Textarea" rows="3" cols="30"
placeholder="I want this feature.."></textarea>
</label>
<label>
<input class="submit-button" id="submit" type="submit">
</label>
</fieldset>
</form>
</div>
</body>
</html>您可以使用 Flexbox 创建行。下面是一个例子：
HTML：
<div class="input flex row">
<input type="checkbox">
<label>Label</label>
</div>
CSS：
.input {
position: relative;
width: 200px;
height: 50px;
}
.flex.row {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
单击下面了解有关如何使用 Flexbox 的更多信息：