Html 按钮不在div内

我有一个

和一个

，但由于某种原因，按钮不会停留在div中

我试图清除div，以及

float:left

，但没有效果

我还在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>

这是一些文本

---

浮动这两个元素似乎可以满足您的需要，除非您希望按钮位于文本旁边

添加以下内容：

 .service-text {
     float: left;
 }
.button-learn {
    float:left;
}

或检查：

首先设置文档高度：

body, html {
    height:100%
}

然后设置

。维修文本

高度：

.service-text {
    margin:0;
    width:100%;
    height:100%; /* change this from auto */
    display:block;
    background-color:#34495e;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}

而且有效！！：）

编辑

HTML

<div id="parent">
    <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>

这是一些文本

CSS

body, html {
    height:100%;
    margin:0;
    padding:0;
}
#parent {
    height:100%; /* remove this and everything falls out of place*/
}
.service-text {
    margin:0;
    width:100%;
    height:100%;
    display:block;
    background-color:#34495e;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}
.service p {
    margin:0;
    padding-top:5px;
    padding-bottom:10px;
    padding-right:7px;
    padding-left:15px;
    font-family:'PT Sans', 'Arial', 'Open Sans';
    font-size:14px;
    line-height:22px;
    color:white;
    display: block;
    position:relative;
}
.button-learn {
    margin: auto;
    position:relative;
    text-align: center;
    border-radius:4px;
    text-decoration: none;
    font-family:'PT Sans', helvetica;
    background: #69c773;
    font-size: 17px !important;
    padding: 10px 10px 10px 10px;
    color: #FFF;
}
.button-learn:hover {
    color: #51A65F;
}

    </div>
</div>

body，html{
身高：100%；
保证金：0；
填充：0；
}
#母公司{
高度：100%；/*取下这个，所有东西都会掉出来*/
}
.服务文本{
保证金：0；
宽度：100%；
身高：100%；
显示：块；
背景色：#34495e；
-moz边界半径：0px；
-webkit边界半径：0px 0px 5px 5px；
边界半径：0px 0px 5px 5px；
}
.p.服务{
保证金：0；
垫面：5px；
垫底：10px；
右侧填充：7px；
左侧填充：15px；
字体系列：'PT Sans'，'Arial'，'opensans'；
字体大小：14px；
线高：22px；
颜色：白色；
显示：块；
位置：相对位置；
}
.按钮学习{
保证金：自动；
位置：相对位置；
文本对齐：居中；
边界半径：4px；
文字装饰：无；
字体系列：'PT Sans'，helvetica；
背景#69c773；
字体大小：17px！重要；
填充：10px 10px 10px 10px；
颜色：#FFF；
}
.按钮学习：悬停{
颜色：#51A65F；
}

---

解释：您只需始终设置

div的高度

，一旦设置了它……您将获得所需的视图

通常，父div会将其高度自动设置为子div的高度，但您分配给

按钮学习的填充会导致该问题

只需设置
display:inline块在你的锚标签上

内联块元素作为内联元素放置（与相邻内容位于同一行），但其行为类似于块元素

.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;
}

如果在按钮上添加阴影，会有什么奇怪的事情发生在下面一点……我还应该说，如果我尝试像这里一样将按钮居中。。。它不会再移到中间。你会认为填充只会扩展div，但即使在按钮上添加阴影，也会显示出主div。你在做什么反复滚动和编辑你的问题？