HTML/CSS geben Li einen Rand und wirken sich nicht auf andere Kinde aus

Question

Er Jungs!

Habe das nächste Problem:

Ich habe ein Menü mit UL- und Li -Elementen, jetzt, wenn ich über einem in meinem Li schwebe, möchte ich die Schriftart erhöhen, das funktioniert, aber die Elemente direkt vom sich ändernden Element bewegen sich ein wenig nach rechts, um Platz zu schaffen, aber da Ist Platz genug, um still zu stehen.

Hier ist mein 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;
}

mit :

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

Ich weiß, dass die Klassen bei UL und IL nicht benötigt werden, aber ich habe nur alle Dinge getestet und ich kann es nicht zum Laufen bringen.

Answer 1

Du musst das geben li eine explizite Breite, die größer oder gleich der Breite des a Wenn es erweitert ist. Nun, das würde bedeuten, dass Ihre li Wird nicht in der Breite nach der Länge seines Textes wachsen. Wenn Sie das auch brauchen, habe ich dafür keine Lösung und öffne es den großen Leuten von 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;
}