Question

我正在尝试在我的网页上列出图像，每个图像下方都有文字。当用户将鼠标悬停在图像上时，图像具有css opactiy。我刚才在div中列出了这些图像：

<div id="FirsRowImg">                   
<a class="linkopacity" href="services_backdrops.html" >
<img src="images/backDropSrv.png" border="0" ></a>  


<a class="linkopacity" href="services_balloons.html" >
<img src="images/balloonsSrv.png" border="0" ></a>  

<a class="linkopacity" href="services_centerpieces.html" >
<img src="images/CtrPieceSrv.png" border="0"  ></a> 

<a class="linkopacity" href="services_flowers.html" >
<img src="images/flowersSrv.png" border="0"   ></a> 

<a class="linkopacity" href="services_chaircovers.html" >
<img src="images/chairCvrsSrv.png" border="0"  ></a>
</div>

我已将每个图像下方的文本放入列表中，但由于某些文本较长，因此无法在它们之间获得正确的间距。我已经列出了这样：

<div id="navSrv">
<ul>
<li>Backdrops &amp; Drapes</li><li>Balloons</li><li>Centre Pieces</li><li>Flowers</li><li>Chair Covers</li>
</ul>
</div>

用于图像的CSS只是间距，用于文本的CSS是：

#navSrv ul li{

   list-style-type:none;
   float: left;
   position: relative;
   top: -9px;
   left: 41px;
 }

#navSrv ul{
margin-left:-110px;
 } 

#navSrv li{
margin-left:90px;
 }

我试图在每个li中添加一个类，但是没有用。我很感激任何帮助。感谢

Answer 1

编辑：我已调整了代码，因此文本应显示在图像下方。您可以尝试嵌套这样的Div：

<div id="FirsRowImg">
  <div class="ImgCell">
    <a class="linkopacity" href="services_backdrops.html" >
      <img src="images/backDropSrv.png" border="0" >
      <p>Backdrops &amp; Drapes</p>
    </a>
  </div>
  <div class="ImgCell">
    <a class="linkopacity" href="services_balloons.html" >
      <img src="images/balloonsSrv.png" border="0" >
      <p>Balloons</p>
    </a>
  </div>
...etc etc...
</div>

并使用CSS来设置ImgCell的样式（我想你可以使用你拥有的大部分CSS用于图像本身，而是将它们用于ImgCell）。

.ImgCell{
display:block;
float:left;
margin-right:20px;//or whatever space you want between the images
width:100px;//same or similar width as your image
}
.ImgCell p{
float:left;
clear:both;
}

我希望这有帮助！

在网页上列出包含文字的图片

1 个答案: