Html CSS填充仅在元素浮动时正确显示

我有一个按钮显示不正确的问题，当元素向左或向右浮动时，按钮显示良好，但是如果没有应用浮动，按钮显示不正确

我准备了以下示例来演示：

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

正如你所看到的，有三个部分div。在每个按钮向左/向右浮动的情况下，它会正确显示，但是当没有应用浮动时，它几乎与跨度没有显示的情况相同：block

提前感谢您的帮助。

将“显示：块”更改为“显示：内联块”似乎可以解决您的问题，而不必担心浮动

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

---

那支笔里只有一个

.section

，而所有的文字都是

颜色：#FFF

，因此很难看到发生了什么。你还应该在这里列出相关的HTML和CSS。你需要修复你的示例-你有一个格式错误的

background:background:#4a8237阻止背景显示的声明。如果您不想浮动按钮，请为其父部分设置浮动。那就不会给你们带来麻烦了。由于某种原因，代码笔没有保存。我用一个新的代码笔编辑了这篇文章。这些应该是什么样子的？除了一些高度/填充底部的问题，它们在我看来都是一样的。
 .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;
    }