我一直在制作一个简单的调查页面，以了解更多关于CSS和HTML的知识。但是我遇到了这样的问题，我的单选按钮值和复选框值不能正确对齐，特别是在“你是如何支付旅行费用？”和“你最喜欢的颜色是什么？”这两个部分。
它们应该像这样对齐：
你是如何支付旅行费用？
- 现金
- 支票
- 其他
body {
height: 920px;
width: 1300px;
margin: 0 0 0 0;
font-family: 'Roboto';
}
#subtag {
width: 80%;
text-align: center;
margin-left: 75px;
}
.container {
background-image: url("https://images.unsplash.com/photo-1491800943052-1059ce1e1012?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80");
background-size: cover;
background-repeat: no-repeat;
position: relative;
height: 920px;
overflow: auto;
}
.container::before {
content: " ";
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 920px;
background: rgba(0, 0, 0, 0.6);
}
.box {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 700px;
height: 890px;
border: 3px solid black;
text-align: center;
background-color: #f2f2f2;
opacity: 0.6;
}
.textbox {
width: 80%;
background-color: #80bfff;
padding: 8px 8px;
margin-top: 10px;
margin-bottom: 10px;
}
.money {
display: inline;
}
#submit {
font-size: 14px;
color: #d6d4e0;
width: 270px;
height: 40px;
background-color: #6b5b95;
opacity: 1.0;
}
#submit:hover {
cursor: pointer;
}<div class="container">
<div class="box">
<h3> Villa's Traveling Survey </h3>
<p id="subtag">
If there is anything that we can do better please let us know by filling out the survey below </p>
<form>
<label for="fname"> Name: </label>
<br>
<input type="text" name="fname" placeholder="enter name" class="textbox">
<br>
<label for="email"> Email: </label>
<br>
<input type="text" name="email" placeholder="enter email" class="textbox">
<br>
<label for="age"> Age: </label>
<br>
<input type="text" name="age" placeholder="enter age" class="textbox">
<p> Travel Destination: </p>
<select name="country">
<option disabled selected value="Select Your Travel Destination"> Select Your Travel Destination </option>
<option value="Australia"> Australia</option>
<option value="New Zealeand"> New Zealand </option>
<option value="Thailand"> Thailand </option>
</select>
<p> How did you pay for your trip? </p>
<label>
<input type="radio" name= "trip" value = "check" class= "money">
check<br>
</label>
<label>
<input type="radio" name= "trip" value = "cash" class= "money">
cash<br>
</label>
<label>
<input type="radio" name= "trip" value = "other" class= "money">
other
</label>
<p> How did you get to your travel destination? </p>
<br>
<input type="checkbox" placeholder="plane" value="plane" class="checkbox">Plane
<input type="checkbox" placeholder="boat" value="boat" class="checkbox">Boat
<input type="checkbox" placeholder="train" value="train" class="checkbox">Train
<input type="checkbox" placeholder="other" value="other" class="checkbox">Other
<p> What is your favorite color? </p>
<label><input
name="prefer"
value="front-end-projects"
type="checkbox"
class="input-checkbox"
/>Front-end Projects</label
>
<br/>
<label
><input
name="prefer"
value="front-end-projects"
type="checkbox"
class="input-checkbox"
/>back-end Projects</label
>
<br/>
<label
><input
name="prefer"
value="front-end-projects"
type="checkbox"
class="input-checkbox"
/>love Projects</label
>
<p> Please enter any additional comments or suggestions </p>
<textarea rows="5" cols="50" maxlength="100" placeholder="Enter comments here"></textarea>
<br>
<input type="submit" value="submit" id = "submit">
</form>
</div>
</div>我是否有任何导致这个问题的原因呢？通常来说，一个简单的br标签就可以对齐单选框的值。但是这些值却没有正确地对齐。
如果有任何建议或者评论，将会很有帮助！
以下是jsfiddle链接：https://jsfiddle.net/fun_code11/9wvj130b/