11

我有一系列带有文本的方形 div，我需要在这些 div 上画一条线，覆盖文本。Z-Index 不是一个选项。也不是<strike>，因为它需要扩展到整个 div，而不仅仅是文本。

我需要的是让它扩展到整个 div，但要在文本的顶部，就像在不同的层上一样，我正在尝试确定没有 Z-Index 是否有可能。

4

5 回答 5

23

:after在- DEMO的帮助下

div {
    position: relative;  
}

div:after {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: #c00;
  content: "";
  width: 100%;
  display: block;
}
于 2013-01-11T17:21:22.060 回答
2

链接到小提琴

.wrapper {
  position:relative;
  width:110px;
}
.square {
  width:20px;
  height:20px;
  border:2px solid #000;
  display:inline-block;
  text-align:center;
}
.strike {
  position:absolute;
  width:100%;
  height:2px;
  background:black;
  top:11px;
  left:0px;
}
于 2013-01-11T17:27:42.500 回答
1

作为解决方案的背景图像怎么样？我的意思是一些CSS代码，例如：

.DIV.squarestroke {
 background: url(img_with-line.gif) repeat;
}
于 2013-01-11T17:22:51.397 回答
1

如果您不能使用 text-decoration:line-through ，则很可能您的 div 上有填充或边距，这就是该行没有一直穿过的原因。此代码段将绘制一条 div 宽度的线，并通过保留您的填充或边距的文本。

<div style="border:solid 2px black; padding : 100px">
       <div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
       <div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
  </div>
于 2013-01-11T17:58:08.703 回答
-1

一个好的老式人力资源可能会这样做：

 <hr style="position:absolute; width:50px; top:5px; left:5px;" />
于 2013-01-11T17:21:20.500 回答