html - 我的复选框或单选按钮没有正确对齐?
问题描述
我一直在制作一个简单的调查页面,以了解有关 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/
解决方案
这是因为您的.box
班级text-align
设置为居中。因此,您的标签和复选框都遵守该规则。它只是“看起来”很奇怪,因为您的标签内容的长度是可变的,因此较短的单词变得更接近中心。
有很多方法来设置这个样式,我不知道你需要什么整体,但一个解决方案是将它们包装在一个容器中,该容器将居中.box
并重置对齐,请记住之前的任何空白这个词也包括在内:
#money-container {
text-align: left;
width: 100px;
margin: auto;
}
<div id="money-container">
<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>
</div>
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;
}
#submit {
font-size: 14px;
color: #d6d4e0;
width: 270px;
height: 40px;
background-color: #6b5b95;
opacity: 1.0;
}
#submit:hover {
cursor: pointer;
}
#money-container {
text-align: left;
width: 100px;
margin: auto;
}
<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>
<div id="money-container">
<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>
</div>
<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>
推荐阅读
- c# - 如何在 NSUserDefaults 中存储 iOS 启动自定义方案数据以从 Unity 中读取
- reactjs - 如何创建一个名为 Tail 的组件,该组件接受一个数字并呈现最后 N 个孩子
- angular - 从服务器端资源方法获取图像后,如何将背景图像设置为角度 5 中的 div 标签?
- django - Grappelli admin 中的 GenericForeignKey:过滤 content_type 以仅显示相关模型
- java - Jmeter - 双数据类型的计数器
- java - 如何防止我的 jsp 应用程序使用跨框架脚本?
- javascript - 显示两行和每行四个项目
- python - 当 django 中存在回溯错误时,我在标准输出中获取日志 2 次
- javascript - 如何在 Node.Js 中的 forEach 中使用 Select Query?
- php - 在时间/日期 PHP 和 ACF 方程中添加额外的一天(对于 WordPress 网站)