如何将margin-right自动设置为到contact标签末尾而非页面末尾

要实现nav的右边缘对齐内部contact标签末尾，而非页面末尾，可按以下方式调整CSS：

核心原因 #

当前nav为默认块级元素，width: auto属性会让它自动撑满父容器（页面）的全部宽度，margin-right: auto的作用是将剩余页面空间全部作为右外边距，因此nav的可视区域会延伸到页面末尾。

最优解决方案 #

将nav的width属性值改为fit-content，让nav的宽度刚好匹配内部所有导航元素的总宽度，即可让nav的右边缘对齐最后一个contact标签的末尾，修改后的代码如下：

nav{
    position: relative;
    margin-right: auto;
    width: fit-content;
    height: 50px;
    background: #f563ff;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}

兼容方案 #

如果需要兼容低版本浏览器，可以给nav添加display: inline-block属性，同样可以实现宽度自适应内容的效果，默认状态下会保持靠左排列，不需要额外修改其他属性。

注意：如果内部导航项用了float属性布局，需要先给nav添加清除浮动的设置，避免宽度计算错误。

你提供的HTML结构截图如下：

内容的提问来源于stack exchange，提问作者James