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

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

当前回答

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

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

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

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

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

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

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

其他回答

没有与<hr>元素等值的垂直元素。然而，你可能想尝试的一种方法是在你要分离的东西的左边或右边使用一个简单的边界:

# your_col { Border-left: 1px纯黑色; ｝ < div id = " your_col " > 你的内容在这里 < / div >

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

position: absolute; 
left: 50%;

只需使用UTF-8杂项符号之一

The & # 124;

& # x7C;

这就是你所需要的，并且它与所有浏览器兼容。

回头谢谢我。

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

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

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

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

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

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

你可以使用hr(水平线)标签，然后用下面的css旋转90度

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

推荐文章