如何解决我的复选框和单选框与相关文本不对齐
我目前正在创建一个有趣的项目。出于某种原因,我的文本和复选框/单选框与文本不对齐。它们似乎偏向一侧并高于文本。
这是我的笔 - https://codepen.io/Amnesia180/pen/RwKQOKP
html,body {
line-height: 1.5;
height: 100%;
margin: 0 auto;
font-family: 'Quicksand',sans-serif;
color: #070707;
}
header {
position: relative;
top: 0;
padding: 0;
background-color: #EFEFEF;
width: 100%;
height: 60px;
}
.material-icons {
color: #505050;
}
#nav-bar {
position: relative;
display: flex;
justify-content: space-between;
padding: 10px;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
li {
padding: 0px 20px;
}
.nav-link-left {
float: left;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link {
float: right;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link:hover {
float: right;
color: #5873D9;
border-bottom: 3px solid #5873D9;
padding-bottom: 5px;
}
#intro {
display: flex;
flex-direction: column;
align-items: center;
height: 470px;
margin-top: 50px;
max-width: 90em;
}
h1 {
font-size: 4em;
color: #34D1BF;
}
h2 {
color: #5873D9;
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
font-size: 1.5em;
padding: 10px 0;
}
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
#submit {
background-color: #34D1BF;
width: 40%;
height: 40px;
margin-top: 15px;
margin-left: 30%;
margin-right: 30%;
border: 2px solid #34D1BF;
color: white;
}
#about,#promo-image,#burger {
max-width: 50em;
width: 90vw;
margin: 0 auto;
padding: 5px;
text-align: left;
}
#promoimage {
display: block;
margin: 0 auto;
max-width: 518px;
width: 100%;
}
#burgers {
margin-top: 40px;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-around;
}
.Box {
border: 2px solid #EFEFEF;
border-radius: 5px;
margin: 2px;
text-align: center;
}
.price {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.price li {
padding: 30px;
border: 0.5px solid #EFEFEF;
}
.card-header {
background-color: rgba(52,209,191,1);
color: white;
}
footer {
width: 100%;
background-color: #EFEFEF;
height: 80px;
text-align: center;
}
footer p {
padding-top: 20px;
}
.burgerform {
text-align: left;
display: inline;
}
.burgerform label {
font-size: 1.5em;
font-weight: bold;
}
.burgerform legend {
font-weight: bold;
}
@media (min-width: 600px) {
#intro {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
#burgers {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
}
}
<label>Sauces</label>
<p/> Burger Sauce <input type="checkBox" id="burgersauce" name="burgersauce" onclick="calculatetotal()"> Dirty Mayo Sauce
谁能给点建议?
谢谢!
解决方法
您的输入有 width: 100%;
,这意味着它将占据整个宽度。而“标签”只是纯文本,所以它们只是流入下一行。
如果要对齐它们,则需要在同一行的 label>
内对齐适当的元素 (100%
)。
那是因为你给你的输入设置了 100% 的宽度,所以现在每个复选框和单选按钮都跨越了整个屏幕宽度。
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
您可以使用浏览器的 CSS 开发人员工具调试 CSS 问题,如所附屏幕截图所示
,将标签(例如 Burger Mayo Sauce)和复选框包裹在一个 Flex-box 中,为其应用 100% 的宽度,并 justify-content:space-between。
.menu-item{
witdh: 100%;
display:flex;
justify-content:space-between;
}
input[type=checkbox]{
//Whatever styling you want to apply to the checkbox.
}
不要在输入中添加 100% 的宽度,flexbox 会为你管理空间。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。