html+css边框长度问题

这里我写了一个ul和li标签里面嵌套了a标签，然后我给a的左边设置了一个边框；而后我又设置了单独的a标签，在这个标签左边设置了一个边框；两个边框的长度不一样，请问这个情况是为什么？？

* {
    margin: 0;
    padding: 0;
    /* 内减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearfix::before,.clearfix::after {
    content: '';
    display: both;
}
.clearfix::after{
    clear:both;
}
.wrapper {
    width: 1200px;
    /* 版心居中 */
    margin: 0 auto;

}

/* 精品推荐栏 */

.goods{
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0px 2px 3px 0px 
    rgba(118, 118, 118, 0.2);
    line-height: 60px;
    padding: 0 36px 0 26px;
}

.goods h3{
    float: left;
    margin-right: 35px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul{
    float: left;
}

.goods ul li a{
    border-left:1px solid #bfbfbf;
    color: #050505;
    font-size: 16px;
}

.goods .xingqu{
    float: right;
    border-left:1px solid #bfbfbf;
    font-size: 16px;
}

   <div class="goods wrapper">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JavaWep</a></li>
        </ul>
        <a href="#" class="xingqu">修改兴趣</a>
     </div>

 <a href="#" class="xingqu"> 修改兴趣</a>  的高度是继承  <div class="goods wrapper">的高度
 <li><a href="#">JavaWep</a></li>  的高度是继承  <ul>  这两高度不一样

我现在想是不是因为，我li嵌套的a标签还是默认的inline形式，而我后面“精品推荐"的a标签被float-right修改了，因此边框长度变长了？？如果我想把后面的a标签边框也能和文字长度相同，那我应该怎么办？诚心向各位请教，刚接触前端不是很理解

那肯定是高度不一样，边框肯定就不一样了

宽度没有设置的话就会根据内容自己调整的，你在li里面追加的话就可以看出来了

【以下回答由 GPT 生成】

这个问题是由于给ul和li标签设置了不同长度的边框，并且a标签的边框是相对于li标签的内容区域而言的。ul和li标签是一个块级元素，它们的默认宽度是100%。所以，如果你给ul设置了一个边框，这个边框会延伸到ul的宽度，并且每一个li标签都会受到这个边框的影响。然后，如果你在li标签中给a标签也设置了边框，这个边框会被放在a标签的内容区域内，而不是li标签的宽度内。

如果你想让a标签的边框与整个li标签的边框长度一致，可以调整HTML和CSS代码。以下是一种可能的解决方案：

1. 将给a标签设置边框的代码移动到li标签上，以保持边框长度一致。

<li><a href="#">Link</a></li>

1. 调整CSS代码，将a标签的边框设置为li标签的边框。

.goods ul li {
    border-left: 1px solid #bfbfbf;
}

.goods ul li a {
    color: #050505;
    font-size: 16px;
    display: block; /* 添加display:block;属性，使a标签充满整个li标签 */
    border-left: inherit; /* 继承li标签的边框样式 */
}

这样做的效果是，a标签的边框将与li标签的边框长度一致。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7543359
• 这篇博客你也可以参考下：html中li标签内的a标签无法继承li的样式是为什么？
• 除此之外, 这篇博客: Html、Css入门解析(复习专用)中的 a标签（超链接标签） 部分也许能够解决你的问题。