css - 如何在没有 float 的情况下忽略元素高度？

Question

好的，我们有了这个标记:

<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 元素将对齐。但是，我不希望它们向左浮动。

有没有办法在不 float 符号的情况下实现这种效果？

Answer 1

将display: inline-block; 添加到.die-control 并删除其规则中的float:left:

http://codepen.io/anon/pen/XMKGrB