Question

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

我准备了以下示例来演示： 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。在按钮向左/向右浮动的每个按钮中，它会正确显示，但是当没有应用浮动时，它几乎与跨度不显示一样：block;

提前感谢您的帮助。

Answer 1

从“display：block”更改为“display：inline-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;
    }

只有在浮动元素时才能正确显示CSS填充

1 个答案: