如何使用HTML制作一条垂直线?
当前回答
我使用了建议的“hr”代码的组合,下面是我的代码:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
我只是改变了“左”像素值的值来定位它。(我用竖线来排列网页上的内容,然后我删除了它。)
其他回答
还有一种可能的方法:使用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或更老的版本)不支持它。
您还可以使用HTML水平线<hr />创建一条垂直线
Html, body{height: 100%;} 人力资源。垂直{ 宽度:0 px; 高度:100%; /*或PX */中的高度 } <hr class="vertical" />
要使垂直线在中间居中使用:
position: absolute;
left: 50%;
我使用了建议的“hr”代码的组合,下面是我的代码:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
我只是改变了“左”像素值的值来定位它。(我用竖线来排列网页上的内容,然后我删除了它。)
在标记周围放置<div>,然后使用CSS来设置它的样式:
.verticalLine { Border-left:厚实实心#ff0000; } < div class = "垂线”> 其他内容 < / div >
推荐文章
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 设备像素比到底是什么?
- 我如何做一个半透明的背景?
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在CSS网格布局中等高行
- $(window).width()与媒体查询不一样
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- 如何以及在哪里使用::ng-deep?