html - css如何在中心圆旁边创建2条水平线？

Question

css如何在中心圆旁边创建2条水平线？

我想将相邻的盒子连接起来，它们的位置居中，我该怎么做？

#login {
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.elips {
  width: 10rem;
  height: 10rem;
  background-color: red;
  padding: red 2rem;

  border-radius: 50%;
}

.box {
  width: 5rem;
  height: 2rem;
  background-color: black;
}

  <div id="login">
      <div class="elips"></div>
      <div><pre>-----
  -----<pre>
      </div>
<div class="box"></div>

标签： htmlcss

Answer 1

您可以使用dashed border style中间 div。您无需为此使用文本。

#login {
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.elips {
  width: 10rem;
  height: 10rem;
  background-color: red;
  padding: red 2rem;
  border-radius: 50%;
}

.box {
  width: 5rem;
  height: 2rem;
  background-color: black;
}

.dashed-lines {
  border: 2px dashed black; 
  width: 50px;
  height: 5px;
  border-left: transparent; 
  border-right: transparent;
}

<div id="login">
  <div class="elips"></div>
  <div class="dashed-lines"></div>
  <div class="box"></div>
</div>