Html/css dando a Li un margen y no afecte a otros niños

Question

¡Los chicos!

Tengo el siguiente problema:

Tengo un menú con elementos UL y LI, ahora, cuando me desplazé por encima de un Inside My Li, quiero aumentar la fuente, todo funciona, pero los elementos directamente desde el elemento cambiante se mueven un poco a la derecha para crear espacio, pero allí Es el espacio suficiente para que se queden quietos.

Aquí está mi código:

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

con :

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

Sé que las clases en UL e IL no son necesarias, pero acabo de probar todas las cosas y no puedo hacer que funcione.

Answer 1

Tienes que dar el li un ancho explícito que será mayor o igual al ancho del a Cuando se expande. Ahora esto significaría que tu li No podrá crecer en ancho de acuerdo con la longitud de su texto. Si eso también es lo que necesitas, no tengo ninguna solución para eso y la abro a las grandes personas de 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;
}