HTML/CSS 给 li 一个边距并且不影响其他 child

Question

伙计们!

遇到下一个问题:

有一个带有 UL 和 LI 元素的菜单，现在当我将鼠标悬停在我的 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 将无法根据其文本的长度增加宽度。如果这也是您所需要的，我没有解决方案，我会向 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;
}