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

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

当前回答

水平线有一个<hr>标签。它还可以与CSS一起使用来制作水平线:

.divider { margin-left: 5 px; margin-right: 5 px; 身高:100 px; 宽度:1 px; 背景颜色:红色; ｝ <人力资源类= >“分隔”

width属性决定了线条的粗细。height属性决定了线条的长度。background-color属性决定了线条的颜色。

其他回答

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

position: absolute; 
left: 50%;

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

*见上面的注释。

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

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

如果你的目标是在容器中放置垂直线来分离并排的子元素(列元素)，你可以考虑这样样式化容器:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

这将为从第2个子元素开始的所有子元素添加左边框。换句话说，相邻子节点之间有垂直边界。

>是子选择器。它匹配左边指定的元素的任何子元素。 *是一个通用选择器。它匹配任何类型的元素。 :not(:first-child)表示它不是其父节点的第一个子节点。

浏览器支持:> *:first-child和:not()

我认为这比简单的.child-except-first {border-left:…}规则，因为让垂直线来自容器的规则，而不是不同子元素的规则更有意义。

这是否比使用临时的垂直规则元素(通过样式化水平规则等)更好，将取决于您的用例，但这至少是一种替代方案。

旋转a <hr> 90度:

<人力资源风格= "宽度:100 px;变换:旋转(90度);" >

推荐文章