如何在HTML中制作一条垂直线

如何使用HTML制作一条垂直线?

当前回答

HTML5自定义元素(或纯CSS)

1. javascript

注册你的元素。

var vr = document.registerElement('v-r'); // vertical rule please, yes!

*在所有自定义元素中-是强制的。

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*你可能需要摆弄一下display:inline-block|inline，因为inline不会展开到包含元素的高度。使用边距使线条在容器内居中。

3.实例化

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*不幸的是，您不能创建自定义自关闭标记。

使用

 <h1>THIS<v-r></v-r>WORKS</h1>

例如:http://html5.qry.me/vertical-rule

不想搞砸javascript?

只需将这个CSS类应用到指定的元素。

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*见上面的注释。

其他回答

要添加一条垂直线，你需要样式一个hr。

现在，当你画一条垂直线时，它会出现在页面的中间:

<hr style="width:0.5px;height:500px;"/>

现在把它放在你想要的地方，你可以使用下面的代码:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

这将把它定位到左边，你可以把它反向定位到右边。

要使垂直线在中间居中使用:

position: absolute; 
left: 50%;

您可以通过简单地使用任何html元素的height / width来绘制一条垂直线。

# verticle-line { 宽度:1 px; 最小高度:400 px; 背景:红色; ｝ < div id = " verticle-line " > < / div >

在HTML中没有任何创建垂直线的标记。

方法:加载直线图像。然后你设置它的样式像"height: 100px;宽:2 px” 方法:你可以使用<td>标签<td style="border-left: 1px solid red;填充:5 px;"> X </td> .

为什么不使用&#124，这是|的html特殊字符

推荐文章