按钮不专区内停留 [英] button not staying within div

问题描述

我有一个div ..和一个按钮..但出于某种原因，该按钮将不会在DIV内停留。

我AVE试图清除DIV，以及浮动：左但它并没有帮助

。

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

小提琴

 ＆LT; D​​IV CLASS =服务文本文本2＆GT;
  ＆所述p为H.;
这是一些文本
  ＆所述; / P＆GT;
＆LT; A HREF =级=按钮，学习中心＆GT;＆LT; I类=发FA-信用卡的风格=填充右：10px的;＆GT;＆LT; / I＆GT;了解详情＆lt; / A＆GT;  ＆LT; / DIV＆GT;
 

解决方案

通常父分区设置其高度自动给其子的高度，但填充分配给按钮学习导致此问题。

您只需要设置显示：inline-block的; 你的锚标记

这是inline-block的元素被作为一个内联元素（在同一行上相邻的内容），但它表现为一个块元素。

  .button学习{
  保证金：2px的;
  位置：相对;
  文本对齐：中心;
  边界半径：4PX;
  文字修饰：无;
  FONT-FAMILY：'PT三世'，黑体;
  背景：＃69c773;
  显示：inline-block的;
  字体大小：知识+重要;
  填充：10px的10px的10px的10px的;
  颜色：#FFF;
}
 

这里是小提琴

I have a div.. and a button.. but for some reason the button will not staying within the DIV.

I ave tried to clear the div, as well as float: left but it has not help.

Adding padding to the bottom of the div but I don't think that is the solution.

Fiddle

<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>

解决方案

Usually parent div set its height auto to its child heights, but padding you assigned to button-learn is causing the issue.

you just need to set display:inline-block; on your anchor tag

An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

.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

这篇关于按钮不专区内停留的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！