html - 按钮不在 div 内

Question

我有一个 <div>和一个 <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 的填充导致了问题。

你只需要在你的 anchor 标签上设置display:inline-block;

内联 block 元素作为内联元素放置(与相邻内容在同一行)，但它的行为类似于 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;
}

Here is fiddle