adv. Liste de style avec CSS

Question

je dois le style d'une liste html régulière comme l'image suivante:

alt text http://i48.tinypic.com/2vjd7pg.jpg

comme vous voyez chaque chaque élément de la liste a un rembourrage sur les côtés et une partie supérieure & bordure inférieure. Lorsque survolée, la bordure a une largeur de 100% de l'élément <ul>. Maintenant le problème est: quand vous donnez <li> un élément supérieur & bordure inférieure j'ai une frontière de 2 px entre chaque élément (bordure inférieure du premier élément et la bordure supérieure du deuxième élément), je ne veux pas Cependant, je ne connais aucune solution pour cela.

mon html:

<div id="tab_top" class="tab"> 
     <div class="bottom"> 
      <div class="cont"> 
      <ul> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
       <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 

mon css:

#tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;} 
#tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;} 
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;} 
#tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;} 

Je serais heureux si vous pouvez me aider

vôtre vérité

Answer 1

Si vous utilisez border-top et border-bottom, vous avez raison, vous obtiendrez une bordure 1px, si toutefois vous utilisez à la fois, puis spécifiez li + li comme ceci:

.tab div.cont ul li { border-top: 1px solid black; border-bottom:1px solid black; } 
.tab div.cont ul li + li { border-top:none; } 

vous allez obtenir ce que vous prétendez vouloir.

Answer 2

Comme Pekka suggéré, avant de supprimer sa réponse, la solution évidente est de modifier ce style:

#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;} 

devenir:

#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;} 

Pas très 'adv.', Vraiment ... À moins que nous sommes tous les deux manque quelque chose?

Answer 3

Supprimez la bordure supérieure ou inférieure, puis définissez un style en ligne sur le premier ou le dernier li pour ajouter la bordure qui semble être "manquante".

Answer 4

Vous pouvez simplement utiliser une bordure inférieure et pour la première comprennent également une bordure supérieure ..

soit utiliser une classe supplémentaire pour le premier élément, ou utilisez la :first-child pseudo-classe (qui ne sont pas pris en charge sur IE6)