我如何创建这样的面包屑导航?

问题描述 投票:0回答:1

我正在努力使面包屑导航看起来像这样。

image of bread crumbs with circles below labels with line through circles

我希望圆在文本下方居中。我希望文本保留在放置面包屑的容器内。例如。我不能使用绝对位置将它们相对于圆放置,因为它们可能会溢出我放入它们的容器。

这是我目前在的位置... https://jsfiddle.net/04pts9ey/2/

body {
  background: gray;
}

.container {
  max-width: 80%;
  margin: auto;
  background: #f6f6f6;
  padding: 40px;
}

.page {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  margin-top: 24px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  margin-bottom: 8px;
}

.circle {
  background: purple;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
}

.step:not(:last-child) .circle:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  width: 100px;
  right: 100px;
  background: green;
}
<div class="container">
  <div class="wrapper">
    <span class="step">
      <span class="text">Short</span>
      <span class="circle"></span>
    </span>

    <span class="step">
      <span class="text">Long title here</span>
      <span class="circle"></span>
    </span>

    <span class="step">
      <span class="text">Medium title</span>
      <span class="circle"></span>
    </span>

    <span class="step">
      <span class="text">Another title</span>
      <span class="circle"></span>
    </span>
  </div>
  <div class="page"></div>
</div>

我的主要问题似乎是我无法将圆和文字对齐,因为将它们放在div中,使我很难在圆之间画线。

css
1个回答
3
投票

这样的事情?

.wrapper {
  display: flex;
  border: 1px solid;
}

.step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.text {
  margin-bottom: 8px;
}

.circle {
  background: orange;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: auto;
}

.step:not(:last-child)>.circle:before {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: 10px;
  transform: translate(50%, 50%);
  background: orange;
}


/* Styles below are not needed, Used for illustration */

.wrapper {
  resize: horizontal;
  overflow: auto;
}
<h3>Bottom right corner to resize for responsiveness</h3>
<div class="wrapper">
  <span class="step">
      <span class="text">Short</span>
  <span class="circle"></span>
  </span>

  <span class="step">
      <span class="text">Long title here</span>
  <span class="circle"></span>
  </span>

  <span class="step">
      <span class="text">Medium title</span>
  <span class="circle"></span>
  </span>

  <span class="step">
      <span class="text">Another title</span>
  <span class="circle"></span>
  </span>
</div>

尽管如此,该代码是自我解释的,如果您有任何问题,请发表评论,我所做的唯一重要更改是:

  1. 将线从相对于.circle移到.step,以更好地控制宽度。
  2. [margin-top:auto上的.circle,以确保在文本溢出时始终位于底部。

  3. 使用.step使flex: 1 1 0;等于宽度,因此圆之间的线具有统一的偏移量。

© www.soinside.com 2019 - 2024. All rights reserved.