如何防止水平导航栏内容溢出到内边距中？

你遇到的问题是导航栏右侧的滚动箭头遮挡了最后一个链接，即使给容器加了内边距也没用，从截图能看到链接确实溢出到了内边距区域：

我看了你的代码，核心问题出在箭头容器的定位方式以及flex容器的内边距没有被正确识别上。下面是具体的修复方案：

1. 调整箭头的定位逻辑 #

你当前给.horizontal-scroll-arrow-container用了position: fixed，这会让它脱离文档流且相对于视口定位，完全不受导航容器的内边距影响。我们需要把它改成相对于导航容器的绝对定位，这样箭头就会跟着导航容器走，同时容器的内边距也能生效：

修改CSS：

.Dashboard__sub-header__menu {
  /* 保留原有属性，补充/修改： */
  position: fixed;
  padding-right: 40px; /* 给箭头留出足够空间，比箭头宽度多10px间距 */
  box-sizing: border-box; /* 确保内边距算入容器总宽度 */
}

.horizontal-scroll-arrow-container {
  /* 替换原有fixed为absolute */
  position: absolute;
  width: auto; /* 不需要占满宽度，只包裹箭头即可 */
  height: 40px;
  right: 0; /* 相对于父容器右侧对齐 */
  bottom: 0;
  margin-left: 0; /* 移除fiddle里的临时间距，现在不需要了 */
}

.horizontal-scroll-arrow {
  /* 保留原有属性，确保宽度固定 */
  width: 30px;
}

2. 修复flex子项的溢出问题 #

因为.Dashboard__sub-header__menu是flex容器，默认情况下子项会尝试填充可用空间，即使你加了padding-right，flex子项还是会延伸到padding区域。上面的定位调整后，配合足够的padding-right，就能让最后一个子项不会被箭头挡住——容器的padding-right会把flex子项的可用宽度压缩，避免它们跑到箭头的位置。

3. 修正JavaScript中的两处小错误 #

你的代码里有两个小bug会影响功能：

• buildHorizontalScrollArrow函数里，你直接返回了$(element).append(el2)，但element并没有定义，应该先把箭头放到容器里再返回容器；
• addHorizontalScrollArrow函数里，参数名和变量名都是el，会导致获取容器失败。

修改后的JavaScript：

function buildHorizontalScrollArrow() { 
  var el = jQuery('<div/>', { class: 'horizontal-scroll-arrow-container' });
  var el2 = jQuery('<div/>', { class: 'horizontal-scroll-arrow', text: '>' });
  el.append(el2); // 先把箭头插入容器
  return el; 
} 

function addHorizontalScrollArrow(containerClass) { 
  var el = document.getElementsByClassName(containerClass)[0];
  var arrowExists = $('.horizontal-scroll-arrow').length > 0;

  if(el.offsetWidth < el.scrollWidth) {
    if(!arrowExists) {
      $(el).append(buildHorizontalScrollArrow())
    }
  } else {
    if(arrowExists) {
      $('.horizontal-scroll-arrow').closest('.horizontal-scroll-arrow-container').remove(); // 连容器一起移除更干净
    }
  } 
} 

$(document).ready(function() { 
  addHorizontalScrollArrow('Dashboard__sub-header__menu'); 
  $(window).on('resize', function() { 
    addHorizontalScrollArrow('Dashboard__sub-header__menu'); 
  }) 
  $(document).on('click', '.horizontal-scroll-arrow', function() { 
    $('.Dashboard__sub-header__menu').scrollLeft(1200); 
  }) 
});

最终效果 #

调整后，箭头会固定在导航容器的右下角，导航容器的padding-right会给箭头留出专属空间，最后一个链接就不会被遮挡了。滚动箭头点击后也能正常滚动到菜单末尾。

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