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

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

Answer 1

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

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

Answer 2

我不确定但是尝试使用display：inline

如何忽略没有浮动的元素高度？

2 个答案: