html - cssでこれを行う方法はありますか?

Question

css を使用してこれを行う方法はありますか?

これを行うための適切で明確な方法を探しています。

Answer 1

HTML

<div class="line"></div>
<span>OR</span>
<div class="line"></div>​

CSS

div.line
{
width:1px;
background-color:Gray;
height:40px;
margin:10px;
}

span
{
font-weight:bold;
}

ライブサンプル

</p>

Answer 2

HTML

<div class="orWrapper">Or</div>​

CSS

.orWrapper {
    text-transform: uppercase;
}
.orWrapper:before, 
.orWrapper:after {
    content: "";
    display: block;
    height: 50px;
    margin-left: 10px;
    border-left: 1px solid #000000;
}
​

デモ

Answer 3

これを行う最も簡単な方法は、3 つの div と border プロパティを使用することです:
あなたの html:

<div class="vertical">
</div>
<div>
OR
</div>
<div class="vertical">
</div>

あなたのCSS：

.vertical{
    border-left:thin solid black;
    height:30px;
    margin-left:10px;
}​

テスト用フィドル: http://jsfiddle.net/SURzN/

Answer 4

作業例: http://jsfiddle.net/fTGuV/

CSS:

.line
{
    height:30px;
    float:left;
    margin-left:10px;
    border: solid 0px #000000;
    width:1px;
    border-left-width: 2px;
}

html:

<div class="line">
</div>
<div style="clear:both;"></div>
<div>OR</div>
<div class="line">
</div>
<div style="clear:both;"></div>

Answer 5

HTML

<div class="line"><div class="txt">Or</div> <span></span></div>​

CSS

span{height:100%; display:block; margin:0 15px; border-left:1px solid black}
.line{width:30px; margin:10px;  position:relative; height:200px; text-align:center}
.txt{position:absolute; top:45%; left:4px; width:20px; height:25px; background:white}

デモ

</p>

Answer 6

私がした最も簡単なこと:-

​&lt;div Class="myclass"></div>
<div>OR</div>
<div Class="myclass"></div>​

CSS

 ​.myclass{
        width:1px;
        height:30px;
        background-color:black;
    margin-left:10px;

    }

デモ

Answer 7

全部同じ箱に入れてたのに…

HTML

<span class="vertical-bar">
    <span>Or</span>
</span>​

CSS

.vertical-bar {
    background: url(http://dl.dropbox.com/u/2179487/black_pixel.png) center top repeat-y;
    float: left;
    padding: 100px 0;
}

.vertical-bar span {
    background-color: white;
    text-transform: uppercase;
}​

デモ: http://jsfiddle.net/PjPAU/