2

知道如何使用 css 做到这一点吗？

任何想法如何使用css做到这一点

我正在寻找一种好的和清晰的方法来做到这一点。

4

7 回答 7

6

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>

于 2012-11-05T06:40:17.923 回答
4

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;
}
​

演示

于 2012-11-05T06:41:21.113 回答
1

最简单的方法就是使用三个 div 和边框属性：
你的 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/

于 2012-11-05T06:41:37.970 回答
0

工作示例：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>
于 2012-11-05T06:43:13.400 回答
0

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>

于 2012-11-05T06:44:06.010 回答
0

我做的最简单的事情：-

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

CSS

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

    }

演示

于 2012-11-05T06:47:35.127 回答
0

我会把它们都放在同一个盒子里...

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/

于 2012-11-05T06:53:57.260 回答