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

Question

我以前在某处见过这个，它工作得很好。 但我不记得在哪里。

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

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

Answer 1

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

只需检查 DOM 就会告诉您您需要了解的内容：线条是具有左边框的绝对定位元素，"or"具有与主体相同的背景颜色以覆盖其周围的线条。

Answer 2

有关示例，请参阅此jsfiddle。这个想法是你在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内容以创建"或"。