創建一個帶有標籤的垂直分隔符

-1

我在前面的某個地方看到過它，它的工作非常好。但我不記得在哪裏。創建一個帶有標籤的垂直分隔符

無論如何，這是我想要的形式。

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

來源

2012-09-26 Neal Ehardt

你的意思是像StackOverflow？

只要檢查DOM就會告訴你你需要知道的內容：該行是一個帶有左邊框的絕對定位元素，而「or」的背景色與主體相同以覆蓋該行周圍。

來源

2012-09-26 19:20:32

也許我的意思是StackOverflow。你在說哪個網頁？ –

當您在未登錄時回答問題時，會顯示您要求的確切佈局。 Downvoter，謹慎解釋？ –

這就是我一直在尋找的！我想，仇恨者會討厭。 –

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內容來創建「或」。

來源

2012-09-26 19:32:51

創建一個帶有標籤的垂直分隔符

回答

相關問題