如何使用HTML制作一条垂直线?
当前回答
我使用了建议的“hr”代码的组合,下面是我的代码:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
我只是改变了“左”像素值的值来定位它。(我用竖线来排列网页上的内容,然后我删除了它。)
其他回答
旋转a <hr> 90度:
<人力资源风格= "宽度:100 px;变换:旋转(90度);" >
你可以使用一个空的<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 >
我认为这是一种简单的方法,你可以根据你的需要左右改变边界
.vertical-line { 左边框:1px实线#000 } < span class = "垂直线" > < /跨度
没有与<hr>元素等值的垂直元素。然而,你可能想尝试的一种方法是在你要分离的东西的左边或右边使用一个简单的边界:
# your_col { Border-left: 1px纯黑色; } < div id = " your_col " > 你的内容在这里 < / div >
要使垂直线在中间居中使用:
position: absolute;
left: 50%;
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?