HTML / CSS donnant à Li une marge et n'effectuez pas d'autres enfants

Question

Les gars!

J'ai le prochain problème:

J'ai un menu avec des éléments UL et Li, maintenant quand je plane au-dessus d'un à l'intérieur de mon Li, je veux augmenter la police, qui fonctionne tout, mais les éléments directement de l'élément changeant se déplacent un peu vers la droite pour créer de l'espace, mais là est suffisamment d'espace pour qu'ils se restent immobiles.

Voici mon code:

.unlistedList {
    position:relative;
    list-style:none;
    min-width:100%;
}

.listedLink {
    position:relative;
    margin: 5px 0 0 0;
    padding: 0 0 0 5em;
    display: inline-table;
    float:left;
}

.linkA {
    font-size:12px;
    text-decoration: none;
    color: #146432;
    font-weight:bold;
    text-transform:uppercase;
    transition: all  0.5s;
    -webkit-transition: all 0.5s;
    -o-transition:all 0.5s;
}

.linkA:hover {
    text-decoration: underline;
    font-size:14px;
    color:#20a150;
}

avec :

<ul class="unlistedList">
  <li class="listedLink"><a href="#" class="linkA">Home</a></li>
  <li class="listedLink"><a href="#" class="linkA">About Us</a></li>
  <li class="listedLink"><a href="#" class="linkA">Portfolio</a></li>
  <li class="listedLink"><a href="#" class="linkA">Services</a></li>
  <li class="listedLink"><a href="#" class="linkA">Blog</a></li>
  <li class="listedLink"><a href="#" class="linkA">Contact Us</a></li>

Je sais que les cours d'UL et IL ne sont pas nécessaires mais je viens de tester tout et je ne peux pas le faire fonctionner.

Answer 1

Vous devez donner le li une largeur explicite qui sera supérieure ou égale à la largeur du a quand il est élargi. Maintenant cela signifierait que votre li ne pourra pas croître en largeur en fonction de la longueur de son texte. Si c'est aussi ce dont vous avez besoin, je n'ai aucune solution pour cela et je l'ouvre aux grands gens de Stack.

http://jsfiddle.net/treetreee/m5xpz/

.listedLink {
    position:relative;
    margin: 5px 0 0 0;
    width:100px;
    display: inline-table;
    float:left;
    border:1px solid black;
}