如何在HTML中画一条垂直线?

How do you make a vertical line using HTML?

如何使用HTML创建一条垂直线?

20 个解决方案

#1

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

在标记周围放置一个

，以显示下一行，并使用CSS对其进行样式化:

.verticalLine {
  border-left: thick solid #ff0000;
}

<div class="verticalLine">
  some other content
</div>

#2

You can use the horizontal rule tag to create vertical lines.

您可以使用水平规则标记来创建竖线。

<hr width="1" size="500">

By using minimal width and large size, horizontal rule becomes a vertical one.

通过使用最小的宽度和大的尺寸，水平规则变成了垂直规则。

#3

You can use an empty <div> that is styled exactly like you want the line to appear:

您可以使用一个空的

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

HTML:

HTML:

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

With exact height (overriding style in-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;"></div>

Style the border if you want 3D look:

如果你想要3D效果，可以设计边框:

    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }

   <div class="vertical-line" style="height: 45px;"></div>

You can of course also experiment with advanced combinations:

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

  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }

 <div class="vertical-line" style="height: 45px;"></div>

#4

You can also make a vertical line using HTML horizontal line <hr />

您还可以使用HTML横线

---

创建一条垂直线

<hr class="vertical"/>

CSS:

CSS:

hr.vertical
{
   width: 0px;
   height: 100%; /* or height in PX */
} 

Working Example

工作示例

#5

There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:

没有与

---

元素的垂直等分。然而，您可能想尝试的一种方法是使用一个简单的边框，在您正在分离的任何东西的左边或右边:

CSS File

<style type="text/css">
    #your_col {
      border-left: 1px solid black;
    }
</style>

HTML File

<div id="your_col">
    Your content here
</div>

#6

HTML5 custom elements (or pure CSS)

1. javascript

Register your element.

注册你的元素。

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

*The - is mandatory in all custom elements.

* -在所有自定义元素中都是强制性的。

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.

*您可能需要使用显示:inline-block|内联，因为内联不会扩展到包含元素的高度。使用边距将线居中于容器中。

3. instantiate

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*Unfortunately you can't create custom self-closing tags.

*不幸的是，您无法创建自定义自闭标记。

usage

 <h1>THIS<v-r></v-r>WORKS</h1>

example: http://html5.qry.me/vertical-rule

例如:http://html5.qry.me/vertical-rule

---

Don't want to mess with javascript?

Simply apply this CSS class to your designated element.

简单地将这个CSS类应用到指定的元素。

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*See notes above.

*参见上面的笔记。

#7

One other option is to use a 1-pixel image, and set the height - this option would allow you to float it to where you need to be.

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

Not the most elegant solution though.

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

#8

There isn't any tag to create a vertical line in HTML.

在HTML中没有任何标记来创建一条垂直线。

1. Method: You load a line image. Then you set its style like "height: 100px ; width: 2px"

   方法:加载一个行映像。然后设置样式为“高度:100px;宽:2 px”

2. Method: You can use <td> tags <td style="border-left: 1px solid red; padding: 5px;"> X </td>

   方法:使用标签 < / td >

#9

Why not use &#124, which is the html special character for |

为什么不使用|，它是|的html特殊字符

#10

You can use hr (horizontal line) tag and than rotate it 90 degree with css below

你可以使用人力资源(水平线)标签，而不是用css将它旋转90度。

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

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

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

#11

I used a combination of the "hr" code suggested, and here's what my code looks like:

我使用了建议的“hr”代码的组合，下面是我的代码:

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

I simply changed the value of the "left" pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)

我只是更改了“左”像素值的值来定位它。(我用这条垂直线来排列我网页上的内容，然后删除了。)

#12

If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:

如果您的目标是在容器中放置垂直线，以分离并排的子元素(列元素)，您可以考虑将容器样式化为如下所示:

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

This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.

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

• > is a child selector. It matches any child of the element(s) specified on the left.
• >是子选择器。它匹配左边指定的元素的任何子元素。
• * is a universal selector. It matches an element of any type.
• 是一个通用选择器。它匹配任何类型的元素。
• :not(:first-child) means it's not the first child of its parent.
• 第一个孩子的意思是它不是它父母的第一个孩子。

Browser support: > * :first-child and :not()

浏览器支持:> *:第一个孩子和:not()

I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.

我认为这比一个简单的。}规则，因为竖线来自容器的规则，而不是不同子元素的规则更有意义。

Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.

这是否优于使用临时的垂直规则元素(通过样式化水平规则等)将取决于您的用例，但这至少是一种选择。

#13

One more approach is possible : Using SVG.

还有一种方法是可能的:使用SVG。

eg :

例如:

<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>

Pros :

优点:

• You can have line of any length and orientation.
• 你可以有任何长度和方向的线。
• You can specify the width, color easily
• 您可以很容易地指定宽度、颜色

Cons :

缺点:

• SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don't support it.
• 现在，大多数现代浏览器都支持SVG。但是一些旧的浏览器(比如IE 8和更老的)不支持它。

#14

To create a vertical line centered inside a div I think you can use this code. The 'container' may well be 100% width, I guess.

要创建以div为中心的竖线，我认为您可以使用此代码。我猜这个“容器”可能是100%的宽度。

HTML

HTML

<div class="container">
    <div class="vertical-line">&nbsp;</div>
</div>

CSS

CSS

div.container{
    width: 400px;
}
div.vertical-line{
    border-left: 1px solid #808080;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    width: 1px;
}

#15

Vertical line right to the div

垂直于div的线

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Vertical line left to the div

垂直线向左到div

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

#16

You can draw a vertical line by simply using height / width with any html element.

只需使用任何html元素的高度/宽度，就可以绘制一条垂直线。

HTML

HTML

<div id="verticle-line"></div>

CSS

CSS

#verticle-line {
    width: 1px;
    min-height: 400px;
    background: red;
}

JSFiddle

JSFiddle

#17

To add a vertical line you need to style an hr.

要添加一条垂直线，你需要设计一个hr。

Now when you make a vertical line it will appear in the middle of the page:

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

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

Now to put it where you want you can use this code:

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

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

This will position it to the left, you can inverse it to position it to the right.

它会把它放在左边，你可以把它反演到右边。

#18

In the Previous element after which you want to apply the vertical row , You can set CSS ...

在您想要应用垂直行的前面的元素中，您可以设置CSS…

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

#19

For an inline style I used this code:

对于内联样式，我使用了以下代码:

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

and that positioned it directly in the center.

它直接位于中心。

#20

To make the vertical line to center in the middle use:

使垂直线在中间的中心使用:

position: absolute; 
left: 50%;