html - 在网页上列出带有文字的图像

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;
}

希望这会有所帮助!