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

<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

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

目前是改成子代选择器就可以了，即

.good>a{

}就显示正常了

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632