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