css - 中心图像在 float 时折叠；上一个/下一个箭头也折叠

Question

我的中心按钮(图像)自行折叠时遇到问题；它没有在所有的荣耀中显示图像(宽度:200px)。此外，出于某种原因，我的上一个和下一个箭头也没有正确显示(只有 2px x 20px，与完整图像相反)。我真的很感激任何见解，因为我已经为此奋斗了几个小时；我确定这是人为错误，因为它发生在“四大”(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;
}

Answer 1

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

CSS:

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