我如何在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;
}

這也是我努力要達到的，不過后來用了一個邊框墊底就上李了。(我需要隱藏左邊的溢出，所以我有一個溢出-x:隱藏在ul元素上):

我嘗試了什么:

ul { overflow-y:可見；}(也在父元素上嘗試過，并保持溢出:在ul上可見)。 搜索谷歌(但那很難。我的意思是試著搜索一下這個問題)。 看看CodePen的例子 在StackOverflow上搜索答案，找到了一些，但它們要么太具體，要么不起作用(有人能告訴我為什么我的overflow-x會影響我的菜單邊框嗎？溢出:隱藏隱藏邊框，但不隱藏溢出的元素) 有人能告訴我為什么我嘗試的方法不起作用嗎？

編輯:參見我的CodePen示例。請復制代碼而不是直接修改:https://codepen.io/johnnybossboy/pen/PepwMX

我希望這是你正在尋找的:項目鏈接

編輯:我已經改變了一些東西，在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. */
}

這可能是你前進的方向:

https://codepen.io/Cordazar/pen/QWZrgKb

我所做的更改是:

.breadcrumbs ul {
  ...
  overflow-x: clip;
}

和

.breadcrumbs ul li:last-child a {
  ...
  padding-bottom: 20px;
}

首先顯示邊框，其次正確放置邊框。