HTML/CSS dando a Li un margine e non effettuano altri figli

Question

Lui ragazzi!

Ho il prossimo problema:

Ho un menu con un elemento Ul e Li, ora quando mi libra sopra una mia Li voglio aumentare il carattere, che funziona tutto ma gli elementi direttamente dall'elemento che cambia si muovono un po 'a destra per creare spazio, ma lì è sufficiente per loro da stare fermi.

Ecco il mio codice:

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

insieme a :

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

So che le lezioni di UL e IL non sono necessarie, ma ho appena testato tutte le cose e non riesco a farlo funzionare.

Answer 1

Devi dare il li una larghezza esplicita che sarà maggiore o uguale alla larghezza del a quando è ampliato. Ora questo significherebbe che il tuo li non sarà in grado di crescere in larghezza in base alla lunghezza del suo testo. Se è anche quello di cui hai bisogno, non ho una soluzione per questo e lo apro alle grandi persone di Stack.

http://jsfiddle.net/treetree/m5xpz/

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