Question

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

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

这是我目前在的位置... 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中在一起使我很难在圆之间画线。

Answer 1

像这样吗？

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

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

将线条从相对于.circle的位置移动到.step，以更好地控制宽度。
margin-top:auto在.circle上，以确保在文本溢出时始终位于底部。
使用.step使flex: 1 1 0;的宽度相等，因此圆之间的线具有统一的偏移量。

如何创建像这样的面包屑导航？

1 个答案: