如何在HTML中创build垂直线
你如何使用HTML做垂直线？
将标记放在希望显示下一行的标记上，然后使用CSS对其进行设置：
.verticalLine { border-left: thick solid #ff0000; }
<div class="verticalLine"> some other content </div>
您可以使用水平线标记来创build垂直线。
<hr width="1" size="500">
您可以使用完全像您希望线条显示的样式的空白<div> ：
HTML：
<div class="vertical-line" />
具有确切的高度（凌驾风格线上）：
div.vertical-line{ width: 1px; /* Line width */ background-color: black; /* Line color */ height: 100%; /* Override in-line if you want specific height. */ float: left; /* Causes the line to float to left of content. You can instead use position:absolute or display:inline-block if this fits better with your design */ }
<div class="vertical-line" style="height: 45px;" />
您还可以使用HTML水平线<hr />制作垂直线
<hr class="vertical"/>
CSS：
hr.vertical { width: 0px; height: 100%; /* or height in PX */ }
工作示例
没有与<hr>元素等价的垂直线。 但是，您可能想尝试的一种方法是在您正在分离的任何位置的左侧或右侧使用简单的边框：
CSS文件
<style type="text/css"> #your_col { border-left: 1px solid black; } </style>
HTML文件
<div id="your_col"> Your content here </div>
HTML5 自定义元素 （或纯CSS）
1. javascript
注册你的元素。
var vr = document.registerElement('v-r'); // vertical rule please, yes!
* -在所有自定义元素中是强制性的。
2. css
vr { 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: <vr></vr>
*不幸的是，你不能创build自定义自闭标签。
用法
<h1>THIS<vr></vr>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;*/ }
*请参阅上面的注释。
另一种select是使用1像素的图像，并设置高度 – 这个选项可以让你浮动到你需要的位置。
不是最优雅的解决scheme。
你可以使用小时（水平线）标签，而不是旋转90度，下面的CSS
hr { transform:rotate(90deg); -o-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); }
没有任何标签在HTML中创build垂直线。
-
方法：您加载一个线条图像。 然后，您将其样式设置为
"height: 100px ; width: 2px" -
方法：你可以使用
<td>标签<td style="border-left: 1px solid red; padding: 5px;"> X </td>
为什么不使用＆＃124，这是＃的html特殊字符
我使用了“hr”代码的组合，下面是我的代码：
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
我只是改变了“左”像素值的值来定位它。 （我用垂直线在我的网页上排列内容，然后我将其删除。）
感谢所有发布他们的解决scheme！
这也是这样做的。 只要旋转水平线
hr { transform: rotate(90deg); }
你现在将有一个垂直线，不要忘记增加小时的大小
如果您的目标是在容器中放置垂直线来分隔并排子元素（列元素），则可以考虑像这样设置容器的样式：
.container > *:not(:first-child) { border-left: solid gray 2px; }
这将从第二个孩子开始向所有子元素添加一个左边框。 换句话说，你会在相邻的孩子之间得到垂直的边界。
-
>是一个小孩select器。 它匹配左侧指定的元素的任何子元素。 -
*是一个通用select器。 它匹配任何types的元素。 -
:not(:first-child)意味着它不是其父母的第一个孩子。
浏览器支持： > *：第一个孩子和：not（）
我认为这比一个简单的.child-except-first {border-left: ...}规则要好，因为让竖线来自容器的规则而不是不同的子元素的规则更有意义。
这是否比使用临时规则元素（通过devise水平规则等）更好取决于您的使用情况，但这至less是一种select。
要创build一个垂直行中居中的div我认为你可以使用这个代码。 我猜，'容器'可能是100％的宽度。
HTML
<div class="container"> <div class="vertical-line"> </div> </div>
CSS
div.container{ width: 400px; } div.vertical-line{ border-left: 1px solid #808080; height: 350px; margin-left: auto; margin-right: auto; width: 1px; }
还有一种方法是可能的：使用SVG 。
例如：
<svg height="210" width="500"> <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" /> Sorry, your browser does not support inline SVG. </svg>
优点：
- 你可以有任何长度和方向的线。
- 你可以很容易地指定宽度，颜色
缺点：
- 大多数现代浏览器现在都支持SVG。 但是一些旧的浏览器（如IE 8和更旧的浏览器）不支持它。
添加一个垂直线，你需要风格的人力资源
现在当你做一个垂直线时，它会出现在页面的中间：
<hr style="width:0.5px;height:500px;"/>
现在把它放在你想要的地方，你可以使用这个代码：
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
这将把它放在左边，你可以反转它把它放在右边
欢迎
您可以通过简单地使用任何html元素的高度/宽度来绘制垂直线。
HTML
<div id="verticle-line"></div>
CSS
#verticle-line { width: 1px; min-height: 400px; background: red; }
的jsfiddle
在之前的元素之后，你想应用垂直行，你可以设置CSS …
border-right-width: thin; border-right-color: black; border-right-style: solid;
对于我使用这个代码的内联样式：
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
并将其直接放置在中心。
要使垂直线居中使用：
position: absolute; left: 50%;
