Question

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

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

Answer 1

在:after - DEMO

的帮助下

div {
    position: relative;  
}

div:after {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: #c00;
  content: "";
  width: 100%;
  display: block;
}

Answer 2

Link To Fiddle

.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;
}

Answer 3

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

.DIV.squarestroke {
 background: url(img_with-line.gif) repeat;
}

Answer 4

如果你不能使用文本修饰：直通你可能在你的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>

Answer 5

一个好的旧时尚人才可能会这样做：

 <hr style="position:absolute; width:50px; top:5px; left:5px;" />

如何在不替换文本的情况下在文本上划分div？

5 个答案: