Question

我的中心按钮（图像）崩溃了我自己的问题;它没有在所有的荣耀中显示图像（宽度：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;
}

Answer 1

@joe; a而不是inline tag＆amp; block tag中的display:block内联标签不占用任何高度，宽度和宽度。垂直边际和填充。因此，请在prev＆amp;中定义next。 #rotator .pagination a.prev, #rotator .pagination a.next{ display:block; }锚点按钮。

CSS：

{{1}}

浮动时中心图像坍塌; Prev / Nxt箭头也会折叠

1 个答案: