移动端面包屑布局：部分li无箭头样式且文本消失问题咨询

Hey there, let's sort out those two mobile breadcrumb problems you're facing! I dug into your CSS and HTML, and here's what's going wrong plus how to fix it:

Why These Issues Happen #

1. Missing arrow styles on some list items
   In your mobile media query, the .breadcrumb li:after uses fixed border-top: 50px and margin-top: -50px—but your mobile li elements only have 3px of vertical padding, making their total height tiny. That giant arrow gets pushed way outside the li's visible area, so you can't see it. On top of that, the mobile arrow's color is hardcoded to one shade, so even if it did show up, it wouldn't match the gradient-colored list items.

2. Text getting hidden by arrows
   You set .breadcrumb li { padding-left: 1px !important; } for mobile, which gives basically no space between the start of the li and the text. The absolute-positioned arrow ends up overlapping the text entirely. Also, a 4px font size is way too small—most mobile browsers struggle to render text that tiny, which makes it look like it's disappearing.

Fixed Mobile CSS #

Replace your existing @media (max-width:600px) block with this code:

@media (max-width:600px) { 
  .breadcrumb { 
    list-style: none; 
    overflow: hidden; 
    font: 10px Helvetica, Arial, Sans-Serif; /* Bump font size for readability */
    margin: 5px; 
    padding: 0; 
  } 
  .breadcrumb li { 
    color: white !important; 
    text-decoration: none; 
    padding: 8px 0 8px 20px; /* Add left padding to keep text away from arrows */
    position: relative; 
    display: block; 
    float: left; 
  } 
  .breadcrumb img { 
    height: 12px !important; 
    width: auto !important; 
  } 
  .breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:active { 
    color: #212121; 
    font-size: 10px !important; /* Match li font size */
  } 
  .breadcrumb li:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    /* Resize arrow to fit mobile li height */
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    position: absolute; 
    top: 50%; 
    margin-top: -12px; /* Vertically center arrow in li */
    left: 100%; 
    z-index: 2; 
  }
  /* Keep the gradient colors for mobile list items and their arrows */
  .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; } 
}

Key Changes Explained #

• Arrow visibility: I resized the arrow's border dimensions to match the mobile li's height (12px instead of 50px) and adjusted margin-top to center it vertically. Now the arrow stays inside the li's visible area. Also, I kept the nth-child color rules for arrows so each arrow matches its parent li's gradient.
• Text overlap fix: Increased left padding on li elements to 20px, giving text space away from the arrow. I also bumped the font size from 4px to 10px—small enough for mobile, but big enough to render properly and be readable.
• Removed conflicting styles: Got rid of the padding-left: 1px !important rule that was shoving text right up against the arrow.

After making these changes, your mobile breadcrumbs should display all arrows correctly, with no text getting hidden behind them.

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