VueJS - 如何使用 HTML/CSS 在用于命名目的的框之前有一条垂直线

Question

我想要在框之前有一条垂直线，以便在 y 轴上命名这些框。

这是我的代码：

<div class="rows" v-if="this.system == 'cpu'">
          <div class="columns is-mobile">
            <div class="column  is-2">box a</div>
            ...
          </div>

          <div class="columns is-mobile">
            <div class="column is-2">box b</div>
            ...
          </div>

这是我的输出：

正如你看到的我的图片，我想要一条竖线，上面有文字，所以请告诉我如何在我的场景中完成它。

我正在寻找框左侧的竖线以便为其命名。该行必须覆盖两个框才能命名 2 个框。

Answer 1

您可以将 border-left 样式应用于 .rows 容器：

.rows {
  border-left: solid 1px red;
}

demo

VueJS - 如何使用 HTML/CSS 在用于命名目的的框之前有一条垂直线

VueJS - How to have a vertical line just before the boxes for naming purpose using HTML/CSS

html

css

box

vue.js