1

2 つのテキスト ボックスがあります。

<label class="q">A<input maxlength="9" /></label>

と

<label class="q">B<input maxlength="9" /></label>

これらの 2 つのボックスを縦線で分割したいのですが、線の中央に「OR」というテキストがあります。

どちらのテキストボックスに入力しても問題ないことをユーザーに明確にすることが目的でした。

と を使って2つの領域を分けてセパレータとして使っfloat:leftてみたのですが、縦線の途中にテキストを表示するにはどうすればよいでしょうか?float:rightborder-left: 1px solid gray

4

2 に答える 2

2

なんらかの画像がないと何を求めているのかを伝えるのは少し難しいですが、これを試すことができます：

/* Target the pseudo-element :before on any label that follows another label */
label + label:before {
    content: "OR";
    color: red;
    padding: 0 10px;
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: -webkit-linear-gradient(0, #000, #000);
    background-image: -moz-linear-gradient(0, #000, #000);
    background-image: -ms-linear-gradient(0, #000, #000);
    background-image: -o-linear-gradient(0, #000, #000);
    background-image: linear-gradient(0, #000, #000);
}

フィドル: http://jsfiddle.net/5WrJu/

于 2012-12-03T20:40:09.410 に答える
1

1 つの方法は、それらの間に要素を挿入し、その中に OR と垂直線を配置することです。

http://jsfiddle.net/gaby/4hCUq/1/のデモ

もう 1 つは、CSS をそのためだけに使用することです (やのような疑似要素を使用して、行とテキストを挿入します:before:after) 。

HTML

<label class="q">A<input maxlength="9" /></label>
<label class="q or">B<input maxlength="9" /></label>

CSS

.q{
    float:left;
    margin-left:50px;
    width:150px;
    position:relative;
}
.or:before{
    content:' ';
    width:1px;
    height:150%;
    top:-25%;
    background-color:black;
    left:-25px;
    position:absolute;
    z-index:100;

}
.or:after{
    content:'OR';
    left:-50px;
    position:absolute;
    z-index:101;
    background-color:white;
    font-size:smaller;
    top:2px;
    text-align:center;
    width:50px;
}

http://jsfiddle.net/gaby/4hCUq/の CSS デモ

于 2012-12-03T20:42:25.090 に答える