问题描述:

I have two text boxes:

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

and

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

I want to split these two boxes with a vertical line, on the center of the line, there's an "OR" text.

The idea was to make it clear to the user that input in either of the textbox is fine.

I tried using float:left and float:right to separate the two areas and use border-left: 1px solid gray as a separator, but how can I display a text in the middle of a vertical line?

网友答案:

One way is to insert an element between them and inside it put the OR and the vertical line.

Demo at http://jsfiddle.net/gaby/4hCUq/1/


Another would be to use CSS only for it (by using pseudo elements like :before and :after to insert the line and text)

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 Demo at http://jsfiddle.net/gaby/4hCUq/

网友答案:

It's a little difficult to tell what you're after without having an image of some sort, but you could try this:

/* 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);
}

Fiddle: http://jsfiddle.net/5WrJu/

相关阅读:
Top