0

我正在使用 Twitter Boostrap 轮播显示 3 个单独的滑块，每个滑块都有一个背景图像和一个“更多”按钮，我将其显示为图像：

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="fill" style="background-image: url('/content/images/slider/header-1.jpg');">
                <div class="container">
                    <div class="span6">
                        @Html.ActionLink("More", "MoreInfo1", null, new { @class = "morebutton" })
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel-inner">
        <div class="item">
            <div class="fill" style="background-image: url('/content/images/slider/header-1.jpg');">
                <div class="container">
                    <div class="span6">
                        @Html.ActionLink("More", "MoreInfo2", null, new { @class = "morebutton" })
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel-inner">
        <div class="item">
            <div class="fill" style="background-image: url('/content/images/slider/header-1.jpg');">
                <div class="container">
                    <div class="span6">
                        @Html.ActionLink("More", "MoreInfo3", null, new { @class = "morebutton" })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

显示更多按钮的类具有以下 CSS 属性：

a.morebutton
{
    background: url(/Content/Images/more.png) no-repeat top left;
     display: block;
     width: 80px;
     height: 25px;
     margin-top:15px;
     text-indent: -9999px; /* hides the link text */
}

不幸的是，虽然文本缩进在第一个滑块上起作用，但文本覆盖在第二个和第三个图像上。任何想法如何解决？

4

0 回答 0