好的,我们有这个标记:
<div class="die-control">
<div class="symbol yellow"></div>
<label for="yellow">yellow</label>
<a class="quantity-control up" href="#">+</a>
<input name="yellow">
<a class="quantity-control down" href="#">-</a>
</div>
<div class="die-control">
<div class="symbol green"></div>
<label for="green">green</label>
<a class="quantity-control up" href="#">+</a>
<input name="green">
<a class="quantity-control down" href="#">-</a>
</div>
这个CSS:
.die-control {
width: calc(100% / 3);
float: left;
margin-bottom: 10px;
}
.symbol.yellow {
display: inline-block;
position: relative;
left: -7px;
width: 30px;
height: 18px;
top: 5px;
background-color: #E9D23F;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.symbol.yellow::after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
top: -10px;
border-bottom: 10px solid #E9D23F;
}
.symbol.green {
display: inline-block;
position: relative;
left: -7px;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom: 20px solid #4F6441;
top: -5px;
}
.symbol.green::after {
content: '';
position: absolute;
left: -15px;
top: 20px;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 20px solid #4F6441;
}
符号类的高度不同。因此,当.control
元素并排放置时,input
元素不会水平对齐。如果我创建.symbol
元素float: left;
,则会忽略它们的高度并且input
元素对齐。但是,我不希望它们向左浮动。
有没有办法在不浮动符号的情况下实现这种效果?
答案 0 :(得分:2)
将display: inline-block;
添加到.die-control
并删除其规则中的float:left
:
答案 1 :(得分:0)
我不确定但是尝试使用display:inline