Html 如何在HTML中制作一条垂直线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3148415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a vertical line in HTML
提问by Gopal
How do you make a vertical line using HTML?
如何使用 HTML 制作垂直线？
回答by Kris van der Mast
Put a <div>around the markup where you want the line to appear to next, and use CSS to style it:
<div>在您希望线条出现的位置周围放置一个标记，然后使用 CSS 对其进行样式设置：
.verticalLine {
border-left: thick solid #ff0000;
}<div class="verticalLine">
some other content
</div>回答by Anthony
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.
通过使用最小宽度和大尺寸，水平线变成了垂直线。
回答by awe
You can use an empty <div>that is styled exactly like you want the line to appear:
您可以使用<div>样式与您希望显示的行完全一样的空：
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>回答by Ishan Jain
You can also make a vertical line using HTML horizontal line <hr />
您还可以使用 HTML 水平线制作垂直线 <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}<hr class="vertical" />回答by Daniel Vassallo
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:
没有与<hr>元素垂直的等价物。但是，您可能想尝试的一种方法是在要分隔的任何内容的左侧或右侧使用简单的边框：
#your_col {
border-left: 1px solid black;
}<div id="your_col">
Your content here
</div>回答by Qwerty
HTML5 custom elements(or pure CSS)
HTML5自定义元素（或纯 CSS）
1. javascript
1. javascript
Register your element.
注册您的元素。
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The -is mandatory in all custom elements.
*-在所有自定义元素中都是强制性的。
2. css
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|inlinebecause inlinewon't expand to containing element's height. Use the margin to center the line within a container.
*您可能需要摆弄一下，display:inline-block|inline因为inline不会扩展到包含元素的高度。使用边距使容器内的线条居中。
3. instantiate
3.实例化
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?
不想弄乱javascript？
Simply apply this CSS class to your designated element.
只需将此 CSS 类应用到您指定的元素即可。
css
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
*见上面的注释。
回答by chris
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.
虽然不是最优雅的解决方案。
回答by Aamir Shahzad
You can draw a vertical line by simply using height / width with any html element.
您可以通过简单地对任何 html 元素使用高度/宽度来绘制一条垂直线。
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}<div id="verticle-line"></div>回答by onurbaysan
There isn't any tag to create a vertical line in HTML.
没有任何标签可以在 HTML 中创建垂直线。
Method: You load a line image. Then you set its style like
"height: 100px ; width: 2px"Method: You can use
<td>tags<td style="border-left: 1px solid red; padding: 5px;"> X </td>
方法：您加载一个线条图像。然后你将它的样式设置为
"height: 100px ; width: 2px"方法：可以使用
<td>标签<td style="border-left: 1px solid red; padding: 5px;"> X </td>
回答by Guy
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.)
我只是改变了“左”像素值的值来定位它。（我使用垂直线来排列网页上的内容，然后我将其删除。）
