HTML/CSS, давая LI маржу и не влияет на других детей

Question

Он, ребята!

Получил следующую проблему:

Получил меню с элементами UL и LI, теперь, когда я наводняю над внутренним лифом, я хочу увеличить шрифт, что все работает, но элементы прямо от изменяющегося элемента немного движутся вправо, чтобы создать пространство, но там есть Достаточно места, чтобы они стояли на месте.

Вот мой код:

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

с :

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

Я знаю, что занятия в UL и IL не нужны, но я только что проверил все, и я не могу заставить его работать.

Answer 1

Вы должны дать li явная ширина, которая будет больше или равна ширине a Когда это расширен. Теперь это будет означать, что ваш li не сможет расти в ширине в зависимости от длины своего текста. Если это то, что вам также нужно, у меня нет решения для этого, и я открываю это для великих людей стека.

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

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