0

我一直在为我的学校网站制作幻灯片，你可以在这里看到。虽然出现在照片下面的文字，但是这两行是两条闭合在一起的，我用的css也没用。

CSS是：

#slider {
width: 1047px; /* important to be same as image width */
height: 350px; /* important to be same as image height */
max-height: 350px;
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 1047px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 16px/16px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 1047px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 20px;
}

p.sliderDesc{
padding-top: 5px;
}

.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}

滑块的 HTML 是：

<div id="slider">
    <ul id="sliderContent">
        <li class="sliderImage">
            <a href=""><img src="slider_images/image1-5.jpg" alt="1" /></a><!--Image     Courtesy Of Wikipedia |     http://upload.wikimedia.org/wikipedia/commons/e/e1/Little_Rock_Central_High_School.jpg-->
            <span class="bottom"><strong>Welcome to Beautiful Little Rock Central High!    </strong><br />Content text...</span>
        </li>
        <li class="sliderImage">
            <a href=""><img src="slider_images/image2.jpg" alt="2" /></a>
            <span class="bottom"><strong>National Historic Site & Museum</strong><br            /BLAH!!!</span>
        </li>
        <li class="sliderImage">
            <img src="slider_images/image3-5.jpg" alt="3" />
            <span class="bottom"><strong>No state shall make or enforce any law which shall abridge the privileges or immunities of citizens of the United States.</strong><br />Fourteenth Amendment </span>
        </li>
        <li class="sliderImage">
            <img src="slider_images/image4-5.jpg" alt="4" />
            <span class="bottom"><strong>Title text 2</strong>
                <br />
                <p class="sliderDesc">Content text...</p>
            </span>
        </li>
        <!--<li class="sliderImage">
            <img src="slider_images/410/5.jpg" alt="5" />
            <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
        </li>-->
        <div class="clear sliderImage"></div>
    </ul>
</div>
<!-- // slider -->

谢谢！我希望这是一个简单的修复。谢谢。

4

1 回答 1

1

好的，我找到了解决这个问题的方法，显然快速简单的解决方案是创建一个我称之为“sliderDesc”的类，并以这种方式使用它：

                 <span class="bottom"><strong>National Historic Site & Museum</strong><br /><p class="sliderDesc">Content text...</p></span>

这导致了这个：lrch.harrisonbh.com

于 2013-02-09T05:56:12.693 回答