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

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

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

在标记周围放置<div>，然后使用CSS来设置它的样式:

.verticalLine { Border-left:厚实实心#ff0000; ｝ < div class = "垂线”> 其他内容 < / div >

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

The & # 124;

& # x7C;

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

回头谢谢我。

你可以使用一个空的<div>，它的样式就像你想要的行一样:

HTML:

<div class="vertical-line"></div>

精确的高度(覆盖样式):

div.vertical-line { 宽度:1 px;/*线宽*/ 背景颜色:黑色;/*线条颜色*/ 高度:100%;/*如果你想要特定的高度。* / 浮:左;/*使行浮动到内容的左边。 您可以使用position:absolute或display:inline-block代替 如果这更适合你的设计*/ ｝ < span style=" font - family:宋体;"> < / div >

样式的边界，如果你想要3D外观:

div.vertical-line { 宽度:0 px;/*只使用边框样式*/ 高度:100%; 浮:左; 边框:1px插入;这是<hr>标签*/的默认边框样式 ｝ < span style=" font - family:宋体;"> < / div >

当然，你也可以尝试高级组合:

div.vertical-line { 宽度:1 px; 背景颜色:银色; 高度:100%; 浮:左; 边框:2px脊银; border - radius: 2 px; ｝ < span style=" font - family:宋体;"> < / div >

我需要一条内联的垂直线，所以我把一个按钮变成了一条直线。

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

还有一种可能的方法:使用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或更老的版本)不支持它。