如何使用HTML制作一条垂直线?
当前回答
垂直到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>
到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>
其他回答
我认为这是一种简单的方法,你可以根据你的需要左右改变边界
.vertical-line { 左边框:1px实线#000 } < span class = "垂直线" > < /跨度
为什么不使用|,这是|的html特殊字符
水平线有一个<hr>标签。它还可以与CSS一起使用来制作水平线:
.divider { margin-left: 5 px; margin-right: 5 px; 身高:100 px; 宽度:1 px; 背景颜色:红色; } <人力资源类= >“分隔”
width属性决定了线条的粗细。height属性决定了线条的长度。background-color属性决定了线条的颜色。
在你想要应用竖行的Previous元素中,你可以设置CSS…
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
如果你的目标是在容器中放置垂直线来分离并排的子元素(列元素),你可以考虑这样样式化容器:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
这将为从第2个子元素开始的所有子元素添加左边框。换句话说,相邻子节点之间有垂直边界。
>是子选择器。它匹配左边指定的元素的任何子元素。 *是一个通用选择器。它匹配任何类型的元素。 :not(:first-child)表示它不是其父节点的第一个子节点。
浏览器支持:> *:first-child和:not()
我认为这比简单的.child-except-first {border-left:…}规则,因为让垂直线来自容器的规则,而不是不同子元素的规则更有意义。
这是否比使用临时的垂直规则元素(通过样式化水平规则等)更好,将取决于您的用例,但这至少是一种替代方案。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?