html/css는 li를 마진하고 다른 어린이들에게 영향을 미치지 않습니다.

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