如何在HTML中创建垂直线

如何使用HTML创建垂直线？

没有与元素等效的垂直线。但是，您可能希望尝试的一种方法是在要分隔的对象的左侧或右侧使用简单的边框：

#您的{
左边框：1px纯黑；
}

你的内容在这里

在标记周围放置一个

，以显示下一行，并使用CSS设置样式：

.verticalLine{
左边框：厚实线#ff0000；
}

其他一些内容

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

方法：加载线条图像。然后将其样式设置为“高度：100px；宽度：2px”

方法：您可以使用

标记

X

---

另一个选项是使用1像素图像，并设置高度-此选项允许您将其浮动到需要的位置

---

但这不是最优雅的解决方案。

您可以使用一个空的

，其样式与您希望显示的行完全相同：

HTML:

具有精确高度（替代直线样式）：

div.vertical-line{
宽度：1px；/*线宽*/
背景色：黑色；/*线条颜色*/
高度：100%；/*如果需要特定高度，请替代内嵌*/
浮动：左；/*使行浮动到内容的左侧。
您可以改为使用位置：绝对或显示：内联块
如果这更适合你的设计*/
}

---

您可以使用水平规则标记创建垂直线

---

<代码> HR宽度＝“1”大小＝“500”＞/代码＞P>以使垂直线居中使用：

position: absolute; 
left: 50%;

---

为什么不使用|，这是

的html特殊字符。您还可以使用html水平线创建垂直线

html，正文{高度：100%；}
人力资源垂直{
宽度：0px；
身高：100%；
/*或高度（以像素为单位）*/
}

---

要添加垂直线，您需要设置hr样式

现在当你做竖线时，它会出现在页面中间：

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



现在，您可以使用以下代码将其放在您想要的位置：

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

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />



这会将其定位到左侧，您可以将其反向定位到右侧。
我使用了建议的“hr”代码组合，下面是我的代码：

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>



我只是改变了“左”像素值的值来定位它。（我使用垂直线在我的网页上排列内容，然后将其删除。）
要在div中创建一条以div为中心的垂直线，我想您可以使用以下代码。
“容器”可能是100%宽度，我猜


div.container{
宽度：400px；
}
垂直线{
左边框：1px实心#808080；
高度：350px；
左边距：自动；
右边距：自动；
宽度：1px；
}

您可以使用hr（水平线）标记，然后使用下面的css将其旋转90度

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

HTML5（或纯CSS）

1.javascript
注册您的元素

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

*
-
在所有自定义元素中都是必需的

2.css
*您可能需要稍微调整一下
display:inline block | inline
，因为
inline
不会扩展到包含元素的高度。使用边距使线在容器内居中

3.实例化
 *参见上面的注释。
< P>如果您的目标是在容器中放置垂直线，以分离并排的子元素（列元素），您可以考虑将容器设为这样：

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

这将向从第二个子元素开始的所有子元素添加左边框。换句话说，相邻子对象之间有垂直边界


是子选择器。它匹配左侧指定元素的任何子元素
*
是一个通用选择器。它匹配任何类型的元素
：not（：first child）
表示它不是其父对象的第一个子对象

浏览器支持：和

我认为这比一个简单的
.child规则要好，除了第一个{border left:…}
规则，因为让垂直线来自容器的规则，而不是不同子元素的规则更有意义

这是否比使用临时的垂直规则元素（通过设置水平规则的样式等）更好取决于您的用例，但这至少是一种替代方法。
还有一种方法是可能的：使用SVG

例如：


很抱歉，您的浏览器不支持内嵌SVG。

优点：


可以有任意长度和方向的线
您可以轻松指定宽度、颜色

缺点：


现在大多数现代浏览器都支持SVG。但是一些旧的浏览器（比如IE8和更早的版本）不支持它
在要应用垂直行的前一个元素中，可以设置CSS

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

您可以通过简单地使用任何html元素的高度/宽度来绘制垂直线


垂直线{
宽度：1px；
最小高度：400px；
背景：红色；
}
对于内联样式，我使用了以下代码：

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

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />



它直接定位在中间。
垂直于div的直线





空div未显示行


垂直线长度取决于div中的内容


这里我使用内联样式。可以用外部样式或内部样式替换它。
<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>

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;" />

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

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