创建一个带有标签的垂直分隔符

Question

我之前在某个地方见过它并且效果非常好。但我不记得在哪里。

无论如何，这是我想要的形式。

Enter a message:
+--------------------------------------------+
|                                            |
|                                            |
+--------------------------------------------+
                      |
                      |  Enter recipients:
                      |  +------------------+
 [Send to everyone]  OR  |                  |
                      |  +------------------+
                      |
                      |  [Send to these users]

Answer 1

你的意思是像在StackOverflow上一样吗？

只需检查DOM就会告诉你需要知道的内容：该行是一个带有左边框的绝对定位元素，而“或”的背景颜色与主体相同，以掩盖周围的线条它

Answer 2

See this jsfiddle for an example。我们的想法是为用户提供HTML中的两个选项...

<span class="screen-reader-text">Choose one of the following options:</span>
<ul>
    <li id="send-to-everyone">
        <!-- omitted -->
    </li>
    <li id="enter-recipients">
        <!-- omitted -->
    </li>
</ul>

...然后设置第一个<li>的样式，使其float:left并拥有border-right。添加一些:after内容以创建“或”。