css边框显示异常问题如何解决？

Question

<div class="good w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#">修改兴趣</a>
    </div>




下面是css代码
.good ul{
    float: left;
}
.good ul li{
    float: left;
}
.good ul li a{
    font-size: 16px;
    margin-left: 30px;
    padding:0 30px;
    color: #050505;
    border-left: 2px solid #c5bfc5;
}
.good a{
    float: right;
    font-size: 16px;
    margin-right: 30px;
    color: #00a4ff;
}

 

这样设置时边框出现了以下情况

顶格显示

而我把a标签加入span标签中之后，即<span><a href="#">修改兴趣</a></span>

css代码变成了

.good span a{

    float: right;

    font-size: 16px;

    margin-right: 30px;

    color: #00a4ff;

}

就恢复了正常

 

 

想知道怎么回事，找到的相同代码显示是正常的，但是我的只有加了span标签之后才显示正常，仅仅把外边盒子高度设置了60px

Answer 1

只用你发的这部分代码测试不会顶格显示。这是不是其它css影响的。