CSS 面包屑步骤指示器调整大小问题

Question

我的购物网站顶部有一个面包屑导航。它显示了在购买过程中有多少步骤以及它们进行了多长时间。并不意味着可以点击。

我遇到的问题是，当从 phone 或更小的 window 观看时，它会被挤压并出现在两行而不是一行上。

有没有办法让整个内容显示在一行中，最好是屏幕宽度的 100%，并自动调整大小以适应 100% 的较小屏幕宽度？

目前它有一个固定的宽度，取决于有多少步。我试图让它在更大的屏幕上自动调整为更大、相同大小的步长，并在 phones 和平板电脑等更小的屏幕上变得更小但仍然内联。

    .step-indicator {
      margin-bottom: 20px;
      line-height: 30px;
    }
    
    .step {
      display: inline;
      float: left;
      font-weight: normal;
      background: #858585;
      padding-right: 10px;
      height: 30px;
      line-height: 32px;
      margin-right: 33px;
      position: relative;
      text-decoration: none;
      color: #fff;
      cursor: default;
    }
    .step:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: -30px;
      border: 15px solid transparent;
      border-color: #858585;
      border-left-color: transparent;
    }
    .step:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      right: -30px;
      border: 15px solid transparent;
      border-left-color: #858585;
    }
    .step:first-of-type {
      border-radius: 2px 0 0 2px;
      padding-left: 15px;
    }
    .step:first-of-type:before {
      display: none;
    }
    .step:last-of-type {
      border-radius: 0 2px 2px 0;
      margin-right: 25px;
      padding-right: 15px;
    }
    .step:last-of-type:after {
      display: none;
    }
    .step.completed {
      background: #CC2262;
      color: #fff;
      cursor: pointer;
    }
    .step.completed:before {
      border-color: #CC2262;
      border-left-color: transparent;
    }
    .step.completed:after {
      border-left-color: #CC2262;
    }
    .step.completed:hover {
      background: #CC2262;
      border-color: #CC2262;
      color: #fff;
      text-decoration: none;
    }
    .step.completed:hover:before {
      border-color: #CC2262;
      border-left-color: transparent;
    }
    .step.completed:hover:after {
      border-left-color: #CC2262;
    }

    <div class="step-indicator">
      <a class="step completed">Step 1</a>
      <a class="step completed">Step 2</a>
      <a class="step completed">Step 3</a>
      <a class="step">Step 4</a>
      <a class="step">Step 5</a>
    </div>

Answer 1

您可以使用 display:flex; 来拉伸内容，并使用媒体查询在页面低于特定宽度时更改字体大小。不幸的是，没有办法只使用 CSS 来使字体自行调整大小以适应。

.step-indicator {
  display: flex;
}

.step:first-of-type::before,
.step:last-of-type::after {
  display: none;
}

.step {
  flex: 1;
  background: #858585;
  height: 30px;
  line-height: 30px;
  margin-right: 33px;
  position: relative;
  color: #fff;
  cursor: default;
}

.step::after,
.step::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
}

.step::before {
  left: -30px;
  border: 15px solid transparent;
  border-color: #858585 #858585 #858585 transparent;
}

.step::after {
  right: -30px;
  border: 15px solid transparent;
  border-left-color: #858585;
}

.step:first-of-type {
  border-radius: 2px 0 0 2px;
  padding-left: 15px;
}

.step:last-of-type {
  border-radius: 0 2px 2px 0;
  margin-right: 0;
}

.step.completed {
  background: #CC2262;
  color: #fff;
  cursor: pointer;
}

.step.completed::before {
  border-color: #CC2262 #CC2262 #CC2262 transparent;
}

.step.completed::after {
  border-left-color: #CC2262;
}

<div class="step-indicator">
  <a class="step completed">Step 1</a>
  <a class="step completed">Step 2</a>
  <a class="step completed">Step 3</a>
  <a class="step">Step 4</a>
  <a class="step">Step 5</a>
</div>

在我的示例中，我删除了一些没有做任何事情的 CSS 并添加了 flex 位。

如需进一步阅读，我建议查看 flexbox and media queries

希望对您有所帮助

CSS 面包屑步骤指示器调整大小问题

CSS breadcrumb step indicator resize issue

css

breadcrumbs