Question

我试图在img中的每个li上放置文字，制作3 x 3网格。我使用ul来保持图片的美观和响应，但似乎无法单独将文本放在它们上面。

这是我希望实现的目标

http://tinypic.com/view.php?pic=e7fqld&s=8#.U4h3LPldUrU

这就是我所拥有的：

<div id="gallery">
        <ul>            
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>            
         </ul>
        </div>

Answer 1

你可以这样做：

<强> DEMO

CSS：

#gallery {
    width:100%;
    margin-right:auto;
    margin-left:auto;
    margin-top:45px;
    position:relative;
}
#gallery li {
    list-style-type:none;
    position:relative;
    float:left;
    width:30%;
    margin:1.66%;
}
#gallery ul p {
    position:absolute;
    top:0;
}
#gallery ul img {
    position: relative;
    width: 100%;
    background-position:center center;
    background-repeat:no-repeat;
}

3 x 3网格，不能在每个img上面放置文本ul

1 个答案: