html/css给出了李的边缘，不要影响其他孩子

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 无法根据其文本的长度在宽度上生长。如果这也是您所需要的，我没有解决方案，我将其开放给伟大的堆栈人。

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

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