如何水平对齐单选按钮和复选框图标？我已经尝试过flexbox的证明内容中心，但是这些项目仍然很麻烦。请帮忙。
body {
color: #faebd7;
background-image: linear-gradient(45deg, #7b4397, #dc2430);
text-align: center;
padding: 5%;
}
main {
background: linear-gradient(35deg, #cc2b5e, #753a88);
border-radius: 10px;
padding: auto;
margin-left: 15%;
margin-right: 15%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
h1 {
padding: 1.1em;
margin: auto;
font-family: Roboto, monospace;
}
p {
font-family: B612, monospace;
margin: 10px;
}
.form-container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.form-group {
font-family: B612, monospace;
margin-left: 15%;
margin-right: 15%;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
}
.text-white {
color: #fff;
font-size: 20px;
font-family: Roboto, monospace;
}
#dropdown {
font-family: B612, monospace;
}
#number-label {
font-family: B612, monospace;
}
.btn.btn-primary {
margin-bottom: 20px;
}<main class="container">
<h1 id="title">How's the stream?</h1>
<p id="description">
Have you watched Jordon Baade stream over on <a style="color: #fff;" href="https://www.twitch.tv/bpwnd" target="_blank"><strong>Twitch</strong></a>? If you have, I'd like to know what you think so far, and get your opinion on a few other things!
</p>
<form action="#" id="survey-form">
<div class="form-group">
<label for="name" id="name-label">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
<br><br>
<label for="email" id="email-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email" required>
<br><br>
<label for="number" id="number-label">Age:</label>
<input type="number" class="form-control" min="13" max="85" id="number" placeholder="Enter your age" required>
</div>
<br>
<label for="dropdown" id="dropdown">Are you enjoying the stream?</label>
<select id="dropdown" name="dropdown" class="form-control">
<option disabled value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br><br>
<div class="form-group">
<fieldset>
<legend>What's your favourite topic that he stream?</legend>
<div class="form-container">
<div class="form-check">
<input id="programming" class="form-check-input" type="radio" name="stream_topic" value="programming">
<label for="programming" class="form-check-label">Programming</label>
</div>
<div class="form-check">
<input id="gaming" class="form-check-input" type="radio" name="stream_topic" value="gaming">
<label for="gaming" class="form-check-label">Gaming</label>
</div>
<div class="form-check">
<input id="harmonica_practice" class="form-check-input" type="radio" name="stream_topic" value="harmonica_practice">
<label for="harmonica_practice" class="form-check-label">Harmonica Practice</label>
</div>
<div class="form-check">
<input id="guitar_practice" class="form-check-input" type="radio" name="stream_topic" value="guitar_practice">
<label for="guitar_practice" class="form-check-label">Guitar Practice</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset>
<legend>What services do you use to watch live streams?</legend>
<div class="form-container">
<div class="form-check">
<input id="twitch" class="form-check-input" type="checkbox" name="stream_service" value="twitch">
<label for="twitch" class="form-check-label">Twitch</label>
</div>
<div class="form-check">
<input id="youtube_gaming" type="checkbox" name="stream_service" value="youtube_gaming">
<label for="youtube_gaming">YouTube Gaming</label>
</div>
<div class="form-check">
<input id="ustream" type="checkbox" name="stream_service" value="ustream">
<label for="ustream">UStream</label>
</div>
<div class="form-check">
<input id="playstation_now" type="checkbox" name="stream_service" value="playstation_now">
<label for="playstation_now">Playstation Now</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<label for="comments">Additional comments:</label><br>
<textarea class="form-control" name="comments" id="comments" placeholder="Enter your comments" cols="30" rows="10"></textarea>
</div>
<br>
<button type="submit" class="btn.btn-primary" id="submit" rows="3">Submit answers</button>
</div>
</form>
</main>
<footer class="text-right" container>
<a href="https://www.jordanbaade.com" target="_blank" class="text-white">Made by Seyienei with help from Jordan Baade.</a>
</footer>
答案 0 :(得分：0)
您可以将align-items: flex-start;与.form-container一起使用
body {
color: #faebd7;
background-image: linear-gradient(45deg, #7b4397, #dc2430);
text-align: center;
padding: 5%;
}
main {
background: linear-gradient(35deg, #cc2b5e, #753a88);
border-radius: 10px;
padding: auto;
margin-left: 15%;
margin-right: 15%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
h1 {
padding: 1.1em;
margin: auto;
font-family: Roboto, monospace;
}
p {
font-family: B612, monospace;
margin: 10px;
}
.form-container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: flex-start; // Changed this
}
.form-group {
font-family: B612, monospace;
margin-left: 15%;
margin-right: 15%;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
text-align: left; // Change this
}
.text-white {
color: #fff;
font-size: 20px;
font-family: Roboto, monospace;
}
#dropdown {
font-family: B612, monospace;
}
#number-label {
font-family: B612, monospace;
}
.btn.btn-primary {
margin-bottom: 20px;
}<main class="container">
<h1 id="title">How's the stream?</h1>
<p id="description">
Have you watched Jordon Baade stream over on <a style="color: #fff;" href="https://www.twitch.tv/bpwnd" target="_blank"><strong>Twitch</strong></a>? If you have, I'd like to know what you think so far, and get your opinion on a few other things!
</p>
<form action="#" id="survey-form">
<div class="form-group">
<label for="name" id="name-label">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
<br><br>
<label for="email" id="email-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email" required>
<br><br>
<label for="number" id="number-label">Age:</label>
<input type="number" class="form-control" min="13" max="85" id="number" placeholder="Enter your age" required>
</div>
<br>
<label for="dropdown" id="dropdown">Are you enjoying the stream?</label>
<select id="dropdown" name="dropdown" class="form-control">
<option disabled value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br><br>
<div class="form-group">
<fieldset>
<legend>What's your favourite topic that he stream?</legend>
<div class="form-container">
<div class="form-check">
<input id="programming" class="form-check-input" type="radio" name="stream_topic" value="programming">
<label for="programming" class="form-check-label">Programming</label>
</div>
<div class="form-check">
<input id="gaming" class="form-check-input" type="radio" name="stream_topic" value="gaming">
<label for="gaming" class="form-check-label">Gaming</label>
</div>
<div class="form-check">
<input id="harmonica_practice" class="form-check-input" type="radio" name="stream_topic" value="harmonica_practice">
<label for="harmonica_practice" class="form-check-label">Harmonica Practice</label>
</div>
<div class="form-check">
<input id="guitar_practice" class="form-check-input" type="radio" name="stream_topic" value="guitar_practice">
<label for="guitar_practice" class="form-check-label">Guitar Practice</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset>
<legend>What services do you use to watch live streams?</legend>
<div class="form-container">
<div class="form-check">
<input id="twitch" class="form-check-input" type="checkbox" name="stream_service" value="twitch">
<label for="twitch" class="form-check-label">Twitch</label>
</div>
<div class="form-check">
<input id="youtube_gaming" type="checkbox" name="stream_service" value="youtube_gaming">
<label for="youtube_gaming">YouTube Gaming</label>
</div>
<div class="form-check">
<input id="ustream" type="checkbox" name="stream_service" value="ustream">
<label for="ustream">UStream</label>
</div>
<div class="form-check">
<input id="playstation_now" type="checkbox" name="stream_service" value="playstation_now">
<label for="playstation_now">Playstation Now</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<label for="comments">Additional comments:</label><br>
<textarea class="form-control" name="comments" id="comments" placeholder="Enter your comments" cols="30" rows="10"></textarea>
</div>
<br>
<button type="submit" class="btn.btn-primary" id="submit" rows="3">Submit answers</button>
</div>
</form>
</main>
<footer class="text-right" container>
<a href="https://www.jordanbaade.com" target="_blank" class="text-white">Made by Seyienei with help from Jordan Baade.</a>
</footer>