Question

我的购物网站顶部有一个面包屑。它显示了有多少步骤以及它们在购买过程中的距离。不应该点击。

我遇到的问题是从手机或较小的窗口观看时，它会被挤压并出现在两条线而不是一条线上。

有没有办法让整个事物出现在一条线上，最好是100％的屏幕宽度，并自动调整大小以适应100％的较小屏幕宽度？

目前，它具有固定的宽度，具体取决于步数。我试图让它在更大的屏幕上自动调整为更大，相同大小的步骤，并且在手机和平板电脑等小屏幕上做得更小但仍然内联。

＆＃13;

    .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;
    }

＆＃13;

    <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>

＆＃13;

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和media queries

我希望这很有用

CSS breadcrumb步骤指示器调整大小问题

1 个答案: