按钮不在div内

Question

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

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

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

我的代码：

<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将其高度auto设置为其子高度，但是您分配给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;
}

Here is fiddle

Answer 2

浮动这两个元素似乎可以做你想要的，除非你希望按钮位于文本的旁边。

添加以下内容：

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

或检查：http://jsfiddle.net/Milanzor/Qt9u3/4/

Answer 3

working demo

首先设置文档高度：

body, html {
    height:100%
}

然后设置.service-text身高：

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

它有效!! ：）

修改

div inside another div

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

解释：您只需要设置div的高度，一旦设置它......您将获得所需的视图！