<div class="line-box"> <!-- 横线,测试用,用来比对两个子元素对齐的位置 --> <div class="line"></div> <div class="child-box1"></div> <div class="child-box2"></div> </div>
.line-box { position: relative; padding-left: 100px; border: 1px solid black; } .line-box::after { content: 'x'; } .child-box1, .child-box2 { display: inline-block; width: 100px; height: 100px; border: 1px solid red; } .line { position: absolute; top: 100px; height: 1px; width: 300px; background: black; }