Question

我有一个react组件，想在文本和图像之间创建一个垂直分隔线（高1厘米）：

<div class="container">
  <span>goodmorning hello user!</span>
  <span class="divider" /> <img src="./bell.png" />
</div>

这是我正在使用的css：

.container {
  flex: 1 0 0;
}

.divider {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 40%;
  border-left: 1px solid black;
}

如何获取排除之间的垂直线。标记和图像？ codepen

Answer 1

您需要从css中删除position: absolute并添加其他样式以达到您想要的大小。这是我根据您的代码制作的一个简单示例： https://codesandbox.io/s/kj1monoxo

Answer 2

我建议使用默认为块元素的div，然后在容器上使用display: flex：

.container {
  display: flex;
}

.divider {
  width: 1px;
  background-color: black;
  margin-left: 20px;
  margin-right: 20px;
  height: 1cm;
}

<div class="container">
  <span>goodmorning hello user!</span>
  <div class="divider"></div>
  <img src="https://img.freepik.com/free-vector/golden-bell_1262-6415.jpg?size=338&ext=jpg&ve=1" />
</div>

Answer 3

而不是边框为空的span元素，为什么不尝试使用width：

.divider {
  position: relative;
  min-width:2px;
  max-width:2px;
  background-color:#000;
  display:inline-block;
  margin:0 0.25%;
}

Answer 4

enter code here
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
               .vl {
     border-left: 6px solid green;
        height: 500px;
      }
          </style>
           </head>
        <body>

          <h2>Vertical Line</h2>

            <div class="vl"></div>

Answer 5

父容器需要具有display: flex并删除绝对位置。

CodeSandbox demo

.container {
  display: flex;
  justify-content: space-around;
}

.divider {
  border-left: 1px solid black;
}

<div class="container">
  <span>goodmorning hello user!</span>
  <span class="divider"> </span>
  <img src="https://uploads.codesandbox.io/uploads/user/1755a454-9fe4-4200-8cf7-f76e5c1cbdec/hE5V-bell.png" />
</div>

如何在CSS中创建垂直分隔线？

5 个答案: