按钮不在 div 内

Question

我有 a<div>和 a <button>，但由于某种原因，按钮不会留在 div 中。

我试图清除 div，float: left但它没有帮助。

我也添加padding到 div 的底部，但我认为这不是解决方案。

我的代码：

<div class="service-text text2">  
  <p>
this is some text
  </p>
<a href="" class="button-learn centered"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>

  </div>

JSFiddle

Answer 1

通常父 div 将其高度自动设置为其子高度，但您分配给的填充button-learn会导致问题。

你只需要设置display:inline-block;你的锚标签

内联块元素作为内联元素放置（与相邻内容在同一行），但它的行为与块元素相同。

.button-learn {
  margin: 2px;
  position:relative;
  text-align: center;
  border-radius:4px;
  text-decoration: none;
  font-family:'PT Sans',helvetica;
  background: #69c773;
  display:inline-block;
  font-size: 17px !important;
  padding: 10px 10px 10px 10px;
  color: #FFF;
}

这是小提琴