1

我有两个文本框：

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

和

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

我想用一条垂直线分割这两个框，在这条线的中心，有一个“OR”文本。

这个想法是为了让用户清楚地知道在任何一个文本框中输入都可以。

我尝试使用float:leftandfloat:right分隔两个区域并border-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

一种方法是在它们之间插入一个元素，并在其中放置 OR 和垂直线。

演示在http://jsfiddle.net/gaby/4hCUq/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;
}

CSS 演示在 http://jsfiddle.net/gaby/4hCUq/

于 2012-12-03T20:42:25.090 回答