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上有一个边框底部。（我需要隐藏左边的溢出，所以我有一个溢出-x：隐藏在ul元素上）：

我尝试了什么：

ul {overflow-y：visible; }（也尝试在父元素上并保持溢出：在ul上可见）。
搜索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. */
}

如何在保持溢出-x：隐藏的同时显示边框底部？

1 个答案: