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

【问题标题】：Creating a vertical separator with a label over it创建一个带有标签的垂直分隔符
【发布时间】：2012-09-26 19:13:54
【问题描述】：

我以前在某个地方见过这个，效果非常好。但我不记得在哪里了。

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

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

【问题讨论】：

标签： html css forms alignment

【解决方案1】：

你的意思是在 StackOverflow 上？

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

【讨论】：

也许我的意思是 StackOverflow。你说的是哪个页面？
当您在未登录的情况下回答问题时，它会显示您所要求的确切布局。否决者，愿意解释一下吗？
这就是我想要的！仇恨者会讨厌，我猜。

【解决方案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 内容来创建“或”。

【讨论】：