html - 如何在保持 overflow-x : hidden? 的同时显示边框底部

Question

如何在隐藏水平溢出的同时在 ul 元素内的 li 上显示边框底部。下面是我现在拥有(但不想要)的示例:

这是我目前的代码(ul是Ruby动态生成的)

<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| %>
              <!--<%= '»' if i > 0 %>-->
              <li> <%= '>' if i > 0 %> <a class="breadcrumbs--title" href="<%= url %>" title="<%= title %>"><%= title %></a></li>
            <% end %>
          </ul>
      </div>
    </div>
  </div>

还有我的 CSS:

.breadcrumbs--row {
  border-bottom: 2px solid #e2e2e2;
  margin-left: -20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  width: calc(100% + 40px);
}
.breadcrumbs ul {
  text-align: right;
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  direction: rtl;
  position: relative;
}
.breadcrumbs ul:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 10%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.breadcrumbs ul li {
  display: inline;
}
.breadcrumbs ul li a {
  text-decoration: underline;
  font-weight: bold;
  padding-bottom: 16px;
}
.breadcrumbs ul li:last-child a {
  font-weight: normal;
  text-decoration: none;
  border-bottom: 4px solid #f77f00;
}

这就是我想要实现的目标，但在最后一个 li 上有一个底部边框。 (我需要隐藏左边的溢出，所以我在 ul 元素上有一个 overflow-x: hidden):

我尝试过的:

• ul { 溢出-y:可见； }(也在父元素上尝试过，并保持溢出:在 u​​l 上可见)。
• Google 搜索(但这很难。我的意思是尝试搜索这个问题)。
• 查看 CodePen 示例
• 在 StackOverflow 上搜索了一个答案，找到了一些答案，但它们要么太具体要么不起作用(can someone tell me why my overflow-x is effecting my menu border?，overflow:hidden hiding borders but not the element that overflows)

有人能解释一下为什么我试过的方法不起作用吗？

编辑:参见我的 CodePen 示例。请复制代码而不是直接更改它:https://codepen.io/johnnybossboy/pen/PepwMX

Answer 1

我希望这就是您要找的:Link to project

编辑:我改变了一些东西，在 codepen 上它似乎工作正常。

/* Please scroll through code, as I have added useful comments. */
body {
  background-color: #ccc;
}

.card {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
}

a {
  color: black;
}

.breadcrumbs--row {
  border-bottom: 4px solid #e2e2e2;
  margin-left: -20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  width: calc(100% + 40px);
  height: 50px;
}
.breadcrumbs ul {
  text-align: right;
  overflow-x: hidden; /* when this is visible, the border is shown, however the text overflows the container which is  undesired behaviour */
  /* ------changed this------- */
  overflow-y: hidden; /* Tried this, did not work as you can see */
  white-space: nowrap;
  direction: rtl;
  position: relative;
  height: 50px;
}
.breadcrumbs ul:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 10%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.breadcrumbs ul li {
  display: inline;
}
.breadcrumbs ul li a {
  text-decoration: underline;
  font-weight: bold;
  padding-bottom: 16px;
  height: 100%;
}
.test_box{
  border-bottom: 4px solid #f77f00;
  padding-bottom: 28px;
}

.breadcrumbs ul li:last-child a {
  /* -------changed this------ */
  padding: 0;
  font-weight: normal;
  text-decoration: none;
 /* THIS IS GONE. I want to have a border on the gray line below, while keeping the overflow on the left the same. Nevermind the gray square next to the horizontal gradient. It's irrelevant for my issue and does not happen on my site. */
}