可以通过CSS样式来实现。以下是一种常见的实现方式:
HTML结构:
<div class="container">
<div class="left"></div>
<div class="line"></div>
<div class="right"></div>
</div>
CSS样式:
.container {
display: flex;
align-items: center;
}
.left, .right {
flex-grow: 1;
height: 1px;
background-color: #000;
}
.line {
width: 10px;
height: 100%;
margin: 0 10px;
background-color: #000;
}
解释:
.container
来包裹左侧内容、分隔线和右侧内容。.left
类来表示,右侧内容使用 .right
类来表示。.line
类来表示,设置宽度、高度和背景颜色,并通过 margin
属性来设置边距。display: flex
和 align-items: center
属性使左侧内容、分隔线和右侧内容在垂直方向上居中对齐。flex-grow: 1
属性来占据剩余空间,并设置高度为1px,以实现分隔线的效果。这种方法可以在不使用背景图片的情况下实现垂直分隔线,并且可以通过调整分隔线的宽度和边距来控制分隔线的样式。
领取专属 10元无门槛券
手把手带您无忧上云