html - 使用负边距 % 将元素堆叠在一起

Question

一直试图让线条显示堆叠并占据父级的整个宽度，但有些东西抵消了后续线条，只有第一行(对齐到底部)正确显示:

.sp-line{
  display: inline-block;
  width: 100%;
  margin-right: -100%;
  position: relative;
  z-index: 10;
  border-top: 1px dotted #000;
}
.sp_baseline{
  border-color: blue;
  vertical-align: baseline;
}
.sp_text-bottom{
  border-color: green;
  vertical-align: text-bottom;
}
.sp_bottom{
  border-color: red;
  vertical-align: bottom;
}
.sp_text-top{
  border-color: green;
  vertical-align: text-top;
}
.line{
  border: 1px solid cyan;
}

span.text {
  background-color: papayawhip;
  line-height: 1.96; 
}

<div class="line">
  <span class="sp-line sp_bottom"></span>
  <span class="sp-line sp_baseline"></span>
  <span class="sp-line sp_text-bottom"></span>
  <span class="sp-line sp_text-top"></span>
  <span class="text1 text">SINGLE line</span>
</div>

试图到达:

我只是想重新创建 https://christopheraue.net/design/vertical-align 中的行我没有看到我在这里遗漏了什么。

Answer 1

无需使元素 width:100% 并使用负边距。相反，您可以将元素保持在较小的水平以将它们排成一行，并依靠溢出来让虚线覆盖所有区域:

.line {
  overflow-x:hidden;
}

.sp-line{
  display: inline-block;
  width: 2px;
  position: relative;
  z-index: 10;
}
.sp-line:before {
  content:"";
  position:absolute;
  border-top: 1px dotted;
  bottom:0;
  left:-100vw; /*big value here*/
  right:-100vw;/*big value here*/
}
.sp_baseline{
  color: blue;
  vertical-align: baseline;
}
.sp_text-bottom{
  color: green;
  vertical-align: text-bottom;
}
.sp_bottom{
  color: purple;
  vertical-align: bottom;
}
.sp_top{
  color: red;
  vertical-align: top;
  transform:translateY(1px); /*we move the top one by 1px so we can see it*/
}
.sp_text-top{
  color: green;
  vertical-align: text-top;
}

span.text {
  background-color: papayawhip;
  line-height: 1.96; 
  font-size:40px;
}

<div class="line">
  <span class="text1 text">SINGLE line</span>
  <span class="sp-line sp_bottom"></span>
  <span class="sp-line sp_top"></span>
  <span class="sp-line sp_baseline"></span>
  <span class="sp-line sp_text-bottom"></span>
  <span class="sp-line sp_text-top"></span>
</div>