今天写代码,写到单选框部分,发现更改完字体和单选框大小之后,两者就不对齐了。代码如下
.type-1{
font-size: 20px;
}
input{
width: 20px;
height: 20px;
}
<div class="choosetype">
<span class="type-1 ">发动机类型</span>
<input type="radio" class="check-1" name="type">
<input type="radio" class="check-1" name="type">
</div>
效果如图
这个时候我们可以使用vertical-align:text-bottom; 使两者垂直对齐(两个元素大小一样的情况下)
input{
width: 20px;
height: 20px;
vertical-align:text-bottom;
}
如果是两者大小不一样,我们可以在先将input转化为行内块级元素(display:inline-block),然后通过设置margin的方式改变input位置。调节对齐