html - CSS 填充仅在元素 float 时才能正确显示

Question

我遇到了按钮显示不正确的问题，当元素向左或向右浮动时按钮显示正常，但是如果没有应用 float 按钮则无法正确显示。

我准备了以下示例来演示: http://codepen.io/anon/pen/xHvyt

我的HTML和CSS如下:

<div class="section">
    <div class="textbox">
        <div class="text">
            <h1>Woop, title</h1>
            <p>content content content</p>
        </div>
        <div class="buttons">
            <a href="#" id="wtf" class="button left"><span>Find out more</span></a>
    <div class="clear"></div>
        </div>
    </div>
</div>

<div class="section">
    <div class="textbox">
        <div class="text">
            <h1>Woop, title</h1>
            <p>content content content</p>
        </div>
        <div class="buttons">
            <a href="#" id="wtf" class="button middle"><span>Find out more</span></a>
    <div class="clear"></div>
        </div>
    </div>
</div>

<div class="section">
    <div class="textbox">
        <div class="text">
            <h1>Woop, title</h1>
            <p>content content content</p>
        </div>
        <div class="buttons">
            <a href="#" id="wtf" class="button right"><span>Find out more</span></a>
    <div class="clear"></div>
        </div>
    </div>
</div>

CSS:

.section .textbox 
{
    width:25%;
    z-index:2;
    padding:2.5%;
    text-align: center;
  background: #4a8237;
}

.section .textbox  h1
{
    font-weight: 800;
    font-size: 275%;
    margin:0;
    color:#FFF;
}

.section .textbox .text p
{
    margin:10% 0;
    color:#FFF;
}

.section .textbox .button 
{
    width: 45%;
    text-align: center;
    background: url('http://i.imgur.com/dUYP3sP.png');
    border-radius: 5px;
    display: block;
    color:#FFF;
    white-space: nowrap;
}

.section .textbox .button.left
{
    float:left;
}

.section .textbox .button.right
{
    float:right;
}

.section .textbox .button.middle
{
    margin:0 auto;
}

.section .textbox .button span
{
    display: block;
    min-height: 40px;
    padding:10%;
    margin-bottom:10%;
    background: url('http://i.imgur.com/NvJtuDL.png') no-repeat center bottom;
}

如您所见，共有三个 .section div。在按钮向左/向右浮动的每个按钮中，它都正确显示，但是当没有应用 float 时，它几乎就像跨度不显示一样: block ；

在此先感谢您的帮助。

Answer 1

从“display:block”更改为“display:inline-block”似乎可以解决您的问题，而无需担心 float 。

 .section .textbox .button span
    {
        display: inline-block;
            min-height: 40px;
            padding:10%;
            margin-bottom:10%;
            background: url('http://i.imgur.com/NvJtuDL.png') no-repeat center bottom;
    }