0

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

我准备了以下示例来演示： 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;

提前感谢您的帮助。

4

1 回答 1

0

从“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;
    }
于 2013-10-08T05:21:13.003 回答