如何使用css在兩個選項框之間繪製垂直線

Question

我有兩個選項框填充。我想在兩行之間顯示一條垂直直線，並在行的中間寫上「OR」。我不記得在哪裏，但我已經看到這在某個地方完成。基本上用戶將能夠選擇這兩個選項框中的任何一個。

我已將代碼放在jsbin上。

Answer 1

I modified it for you, check here。

基本上的想法是將這些選擇框放入div並浮動它們。

Answer 2

恩，我想你可以連續3個div（所有float：left;），中間的可以是黑色背景設置高度，外面的兩個可以有選擇框？

Answer 3

添加一個新的div與背景圖像（行）和文字或寫在裏面;） 比你必須使用float css屬性。 每個人都可以選擇AREADY從要素兩個選項框...

Answer 4

我知道你已經接受了答案，但我想我會爲您提供這個選項，以及：

http://jsbin.com/aweto3

它與@ Sarfraz的答案略有不同，其中包括垂直線，儘管這幾乎只是一個小小的CSS差異。雖然我也整理了代碼並使用了<form>和<fieldset>元素，但是... =）