文本隐藏在移动面包屑布局中

Question

为什么当我在移动视口上测试时，某些列表项 (li) 看起来不像箭头？似乎一些文本也消失了，可能在箭头三角形后面。

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 13px Helvetica, Arial, Sans-Serif;
  margin: 20px;
  padding: 0;
}

.breadcrumb li {
  color: white !important;
  text-decoration: none;
  padding: 10px 0 10px 35px;
  background: brown;
  /* fallback color */
  background: hsla(34, 85%, 35%, 1);
  position: relative;
  display: block;
  float: left;
}

.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:active {
  color: #212121;
}

.breadcrumb li:after {
  content: " ";
  display: block;
  width: 0 !important;
  height: 0 !important;
  border-top: 50px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent !important;
  border-left: 30px solid hsla(34, 85%, 35%, 1) !important;
  position: absolute !important;
  top: 50% !important;
  margin-top: -50px !important;
  left: 100% !important;
  z-index: 2 !important;
}

.breadcrumb li:first-child {
  padding-left: 10px;
}

.breadcrumb li:nth-child(8) {
  background: hsla(34, 85%, 15%, 1) !important;
}

.breadcrumb li:nth-child(8):after {
  border-left-color: hsla(34, 85%, 15%, 1) !important;
}

.breadcrumb li:nth-child(7) {
  background: hsla(34, 85%, 25%, 1) !important;
}

.breadcrumb li:nth-child(7):after {
  border-left-color: hsla(34, 85%, 25%, 1) !important;
}

.breadcrumb li:nth-child(6) {
  background: hsla(34, 85%, 35%, 1) !important;
}

.breadcrumb li:nth-child(6):after {
  border-left-color: hsla(34, 85%, 35%, 1) !important;
}

.breadcrumb li:nth-child(5) {
  background: hsla(34, 85%, 45%, 1) !important;
}

.breadcrumb li:nth-child(5):after {
  border-left-color: hsla(34, 85%, 45%, 1) !important;
}

.breadcrumb li:nth-child(4) {
  background: hsla(34, 85%, 55%, 1) !important;
}

.breadcrumb li:nth-child(4):after {
  border-left-color: hsla(34, 85%, 55%, 1) !important;
}

.breadcrumb li:nth-child(3) {
  background: hsla(34, 85%, 65%, 1) !important;
}

.breadcrumb li:nth-child(3):after {
  border-left-color: hsla(34, 85%, 65%, 1) !important;
}

.breadcrumb li:nth-child(2) {
  background: hsla(34, 85%, 75%, 1) !important;
}

.breadcrumb li:nth-child(2):after {
  border-left-color: hsla(34, 85%, 75%, 1) !important;
}

.breadcrumb li:nth-child(1) {
  background: hsla(34, 85%, 85%, 1) !important;
}

.breadcrumb li:nth-child(1):after {
  border-left-color: hsla(34, 85%, 85%, 1) !important;
}

.breadcrumb li a {
  color: white
}

.breadcrumb li a:hover {
  background: hsla(34, 85%, 25%, 1);
}

.breadcrumb li a:hover:after {
  border-left-color: hsla(34, 85%, 25%, 1) !important;
}

.breadcrumb li:hover {
  background: hsla(34, 85%, 25%, 1);
}

.breadcrumb li:hover:after {
  border-left-color: hsla(34, 85%, 25%, 1) !important;
}

.border {
  width: 100%
}

.shadow:after {
  border-left-color: #54AF4A !important;
}

li .shadow {
  font-weight: bold;
  color: green !important;
  text-decoration: underline !important;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #b3b2b2 !important;
}

.border a {
  color: blue;
}

@media (max-width:600px) {
  .breadcrumb {
    list-style: none;
    overflow: hidden;
    font: 13px Helvetica, Arial, Sans-Serif;
    margin: 5px;
    padding: 0;
  }
  .breadcrumb li {
    font-size: 4px !important;
    padding: 3px 0 3px 35px;
  }
  .breadcrumb li {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
  .breadcrumb img {
    height: 6px !important;
    width: auto !important;
  }
  .breadcrumb a,
  .breadcrumb a:link,
  .breadcrumb a:visited,
  .breadcrumb a:active {
    color: #212121;
    font-size: 4px !important;
  }
  .breadcrumb li:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34, 85%, 35%, 1);
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
  }
}

<ul class="breadcrumb">
  <li><a href="">CONCEPTION</a></li>
  <li><a href="">POUR/MOUNT</a></li>
  <li><a href="">TEETH SET UP</a></li>
  <li><a href="">FINALIZATION</a></li>
  <li><a href="">SHIPPED</a></li>
  <li><a href="">CONVERSION</a></li>
  </u>

Answer 1

这是一个非常简单的面包屑布局，也是移动响应式的。

您的代码中存在一些问题

媒体查询重复了很多不必要的属性
开始和结束 <style> 标签被视为选择器
!important 值在此代码示例中没有任何作用，因此已被删除
您的结束 </ul> 标签是 </u>，这可能会影响功能
您不需要使用 overflow: hidden;（我会说明原因）
4px字体在手机上几乎看不到

我所做的改变

我使用 flexbox 水平对齐面包屑
我使用 flexbox 水平对齐 link 容器和三角形
我没有对列表元素使用 :after 选择器，而是使用了 :before，因为它的响应速度更快，并且与您原来的 left: 100% 属性
我将 position: absolute 更改为 position: relative 以提高响应速度。
我使用 align-items: center;

然后您可以使用边框大小更改高度和宽度（如果您更喜欢较小的移动面包屑布局）。

.breadcrumb {
  list-style: none;
  font: 13px Helvetica, Arial, Sans-Serif;
  padding: 0;
  display: flex;
}

.breadcrumb li {
  color: white !important;
  text-decoration: none;
  background: brown;
  /* fallback color */
  background: hsla(34, 85%, 35%, 1);
  position: relative;
  display: flex;
  align-items: center;
}

.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:active {
  color: #212121;
  margin: 0 10px;
}


.breadcrumb li:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 15px solid transparent;
  border-left: 15px solid hsla(34, 85%, 35%, 1);
  position: relative;
  left: 100%;
  z-index: 2;
}

.breadcrumb li:nth-child(8) {
  background: hsla(34, 85%, 15%, 1) !important;
}

.breadcrumb li:nth-child(8):before {
  border-left-color: hsla(34, 85%, 15%, 1) !important;
}

.breadcrumb li:nth-child(7) {
  background: hsla(34, 85%, 25%, 1) !important;
}

.breadcrumb li:nth-child(7):before {
  border-left-color: hsla(34, 85%, 25%, 1) !important;
}

.breadcrumb li:nth-child(6) {
  background: hsla(34, 85%, 35%, 1) !important;
}

.breadcrumb li:nth-child(6):before {
  border-left-color: hsla(34, 85%, 35%, 1) !important;
}

.breadcrumb li:nth-child(5) {
  background: hsla(34, 85%, 45%, 1) !important;
}

.breadcrumb li:nth-child(5):before {
  border-left-color: hsla(34, 85%, 45%, 1) !important;
}

.breadcrumb li:nth-child(4) {
  background: hsla(34, 85%, 55%, 1) !important;
}

.breadcrumb li:nth-child(4):before {
  border-left-color: hsla(34, 85%, 55%, 1) !important;
}

.breadcrumb li:nth-child(3) {
  background: hsla(34, 85%, 65%, 1) !important;
}

.breadcrumb li:nth-child(3):before {
  border-left-color: hsla(34, 85%, 65%, 1) !important;
}

.breadcrumb li:nth-child(2) {
  background: hsla(34, 85%, 75%, 1) !important;
}

.breadcrumb li:nth-child(2):before {
  border-left-color: hsla(34, 85%, 75%, 1) !important;
}

.breadcrumb li:nth-child(1) {
  background: hsla(34, 85%, 85%, 1) !important;
  margin-left: -10px;
}

.breadcrumb li:nth-child(1):before {
  border-left-color: hsla(34, 85%, 85%, 1) !important;
}

<ul class="breadcrumb">
  <li><a href="">CONCEPTION</a></li>
  <li><a href="">POUR/MOUNT</a></li>
  <li><a href="">TEETH SET UP</a></li>
  <li><a href="">FINALIZATION</a></li>
  <li><a href="">SHIPPED</a></li>
  <li><a href="">CONVERSION</a></li>
</ul>

文本隐藏在移动面包屑布局中

Text is hidden on mobile breadcrumb layout

html

css

breadcrumbs

您的代码中存在一些问题

我所做的改变