[分享]css两条线并排

CSS中，在网页设计中常见的情况是需要在同一行中显示两条线，这时候可以使用CSS两条线并排的技巧来实现。//html代码 //CSS代码 .container{ :relative; } .l...

CSS中，在网页设计中常见的情况是需要在同一行中显示两条线，这时候可以使用CSS两条线并排的技巧来实现。

//html代码
<div class="container">
    <hr class="left">
    <hr class="right">
</div>

//CSS代码
.container{
    position:relative;
}
.left{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:50%;
    height:1px;
    background-color:#000;
}
.right{
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    width:50%;
    height:1px;
    background-color:#000;
} 

上述代码中，首先需要将两条线包裹在一个容器中，并将容器的position属性设置为relative，接下来分别对两条线进行样式设置。

对于第一条线，我们将其position属性设置为absolute，然后将其top属性设置为容器高度的一半，left属性设置为0，即左侧，实现了两条线并排的效果。同时我们设置了线的高度为1px ，颜色为黑色。

对于第二条线，同理我们将其position属性设置为absolute，然后将其top属性设置为容器高度的一半，right属性设置为0，即右侧，这样就实现了两条线并排的效果。同时我们也设置了线的高度为1px，颜色为黑色。

通过这种方式，我们可以轻松实现两条线的并排效果，而且可自由调整两条线的长度比例、颜色等属性来满足设计需要。