Création indépendante des éléments de liste

Question

J'ai un ul avec plusieurs éléments de liste composés de h3s et lis avec l'ID de classe "close".

J'ai un style de survol qui étend l'espacement des lettres sur les h3s, le problème est que les éléments avec la classe de fermeture se développent également. J'ai essayé quelques choses différentes avant d'ajouter la classe, comme le nième enfant etc (tout ce qui est visible dans le code). Je voudrais que les lis classés proches restent de la même taille quand les h3s sont développés.

Toute aide est appréciée.

jsFiddle ici: https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0

CSS:

a {text-decoration:none; 
} 
li {list-style:none; 
} 
} 
#openClose { 
    position:absolute; 
    top:200px; 
    margin-top:55px; 
} 

#openClose li{ 
    list-style-type:none; 
    display:block; 
    padding-right:-50px; 
} 

#openClose li:nth-child(2n+2){ 
    margin:30px 0 100px 0; 
    background-color:#000; 
    border:2px #fff solid; 
    text-align:center; 
    letter-spacing:1rem; 
    padding:10px 0 10px 0; 
} 
#openClose li:nth-child(2n+2):hover{ 
letter-spacing:-0.1rem; 
transition:.3s; 
} 

#openClose li a h3{ 
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif; 
color:#73a6c2; 
} 

.close{ 
} 

#openClose li a h3:hover{color:#fff; 
text-shadow:2px 1px 2px #000; 
transition:.2s; 
letter-spacing:1rem; 
} 

a:visited { text-decoration: none; color:#B8CEDB; } 
a:hover { text-decoration: none; color:#D7D8D8; } 
a:focus { text-decoration: none; color:#fff; 

}

HTML:

<section id="openClose"> 
<ul> 
<li><a href="#wrapper"><h3>Tool Descriptions</h3></a></li> 
<li class="close"><a href="#">Close</a></li> 
<li><a href="#wrapper2"><h3>Key tools</h3></a></li> 
<li class="close"><a href="#">Close</a></li> 
<li><a href="#wrapper3"><h3>Adjustment Layers & <br> 
Blending modes</h3></a></li> 
<li class="close"><a href="#">Close</a></li> 
</ul></section> 

Answer 1

La chose est que vous n'avez pas un élément défini avec largeur, de sorte que tous les éléments ont la largeur de l'élément le plus grand.

Pour faire ce que vous essayez de réaliser, vous avez beaucoup de solutions en fonction de vos besoins.

Vous pouvez définir une largeur fixe sur l'un des parents, comme ul par exemple et ajoutez la propriété white-space: nowrap au h3 (voir the fiddle):

ul { 
    width: 200px; 
} 
#openClose li a h3{ 
    white-space: nowrap; 
} 

Vous pouvez également définir une largeur fixe sur votre li avec le bouton de fermeture (voir the fiddle):

#openClose li:nth-child(2n+2){ 
    width: 200px; 
} 

Answer 2

Voici mon essai. Comme vous voyez je l'ai changé un peu de votre code de rejoindre certaines choses et nettoyer un peu, mais le point est dans la propriété width de .close

https://jsfiddle.net/7eLmarnp/12/