浮动时中心图像折叠； Prev / Next 箭头也塌陷答案

【问题标题】：Center Image Collapses when floated; Prev / Nxt Arrows Also Collapsing浮动时中心图像折叠； Prev / Next 箭头也塌陷
【发布时间】：2012-06-05 01:09:03
【问题描述】：

我的中心按钮（图片）自行折叠时遇到问题；它没有在所有荣耀中显示图像（宽度：200px）。此外，由于某种原因，我的上一个和下一个箭头也没有正确显示（只有 2 像素乘 20 像素，而不是完整图像）。我真的很感激任何见解，因为我已经为此奋斗了几个小时。我确信这是人为错误，因为它发生在“The Big 4”（IE、Chrome、FF 和 Opera）中。另外，我附上了一张图片以帮助清楚地说明问题...

我的 HTML 如下：

          <div class="excerpt">
            ...
            <div class="buttons">
                <a href="page.html" alt="Description" class="button active left">The Challenge</a>
                <a href="page.html" alt="Description" class="button">The Solution</a>
                <a href="page.html" alt="Description" class="button right">Our Expertise</a>
            </div><!-- end .buttons -->

            <div class="pagination">
                <a href="blog.html" class="prev" alt="previous">&nbsp;</a> 
                <a href="blog.html" alt="1">1</a> 
                <a href="blog.html" alt="2" class="active">2</a>
                <a href="blog.html" alt="3">3</a>
                <a href="blog.html" alt="4">4</a>
                <a href="blog.html" alt="5">5</a>
                <a href="blog.html" class="next" alt="next">&nbsp;</a>
            </div><!-- end .pagination -->

        </div><!-- end #rotator -->

上面的CSS如下：

#rotator .excerpt {
    float: left;
    width: 320px;
    margin: 0 0 0 40px;
}

#rotator .buttons {
    text-align: center;
    font-size: 20px;
    clear: both;
    padding-top: 15px;
    width: 100%;
}

#rotator .button {
    width: 200px;
    height: 40px;
    background-image: url(images/btn.gif);
    background-repeat: no-repeat;
    padding: 3px 0 0 0;
    text-indent: -20px;
}

#rotator .button.active {
    background-image: url(images/active-btn.gif);
    background-repeat: no-repeat;
}

#rotator .button.right {
    margin-right: -5px; 
}

#rotator .pagination {
    clear: both;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    padding-top: 10px;
    width: 100%;
}

#rotator .pagination a.prev {
    height: 30px;
    width: 30px;
    text-indent: -9999px;
    background-image: url(images/page-left.png);
    background-repeat: no-repeat;
    margin-right: 10px;
}

#rotator .pagination a.next {
    height: 30px;
    width: 30px;
    text-indent: -9999px;
    background-image: url(images/page-right.png);
    background-repeat: no-repeat;
    margin-left: 10px;
}

【问题讨论】：

标签： css image css-float

【解决方案1】：

@乔; a 在 inline tag 而不是 block tag & 内联标签中不采用任何高度、宽度和垂直边距和填充。因此，请在您的 prev 和 next 锚按钮中定义 display:block。

CSS：

#rotator .pagination a.prev,
#rotator .pagination a.next{
display:block;
}

【讨论】：