如何在保持overflow-x:hidden时为ul内的li元素显示下边框？

嘿，我来帮你搞定这个面包屑的样式问题！

咱们先明确核心需求：让面包屑的li元素横向排列，超出容器时隐藏溢出部分，同时每个li都能显示完整的下边框。下面是具体的调整方案：

关键CSS调整 #

直接给你能落地的代码，你可以根据自己的配色需求修改参数：

/* 处理ul容器：强制横向排列+隐藏溢出 */
.list--inline {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap; /* 让所有li在一行，不自动换行 */
  overflow: hidden; /* 隐藏超出容器的横向内容 */
}

/* 处理li元素：显示下边框+优化排列 */
.list--inline li {
  display: inline-block; /* 用inline-block替代inline，确保边框能正确渲染 */
  border-bottom: 1px solid #ccc; /* 这里换成你想要的边框颜色/粗细 */
  margin-right: 10px; /* 控制li之间的间距 */
  padding-bottom: 3px; /* 让边框和文字之间留一点空隙，更美观 */
}

/* 可选：给分隔符单独加样式（如果保留ERB里的>） */
.list--inline li .breadcrumb-sep {
  margin-right: 10px;
  color: #999; /* 分隔符的灰色调，和主文字区分开 */
}

适配你的Ruby ERB代码 #

你可以把分隔符单独抽成一个小元素，让结构更清晰，也方便样式控制：

<div class="breadcrumbs">
  <div class="row breadcrumbs--row">
    <div class="col-xs-12">
      <ul class="list--inline">
        <% @breadcrumbs.each_with_index do |(title, url), i| %>
          <li>
            <% if i > 0 %>
              <span class="breadcrumb-sep">></span>
            <% end %>
            <%= url.present? ? link_to(title, url) : title %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</div>

为什么这样有效？ #

• white-space: nowrap 强制所有li保持在同一行，才会触发横向溢出的情况；
• inline-block 既保留了横向排列的特性，又能让border属性正常生效（inline元素的边框容易出现垂直对齐问题）；
• 把overflow: hidden加在ul容器上，只会裁剪超出容器的内容，而li的下边框只要在ul的高度范围内，就能完整显示。

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