如何使用css绘制如下所示的线条？

Question

我想在文本框之间绘制这个结构。我尝试了我的时间，但无法画画。

TextBox1中--- |            | --- TextBox2中 textbox3 --- |            | --- textbox4 textbox5 --- |            | --- textbox6 textbox7 --- |            | --- textbox8

Answer 1

Specifications.and

div {
  margin-bottom: 3px;
  font-family: monospace, sans-serif;
}

div:nth-child(odd) {
  border-right: 1px solid black;
  text-align: right;
  width: 50%;
}

div:nth-child(even) {
  border-left: 1px solid black;
  margin-left: 50%;
}

div:nth-child(odd)::after,
div:nth-child(even)::before {
  content: '---'
}