11

テキストを含む一連の正方形のdivがあり、テキスト上でそれらのdivを横切る線を引く必要があります。Z-Indexはオプションではありません。<strike>テキストだけでなく、div全体に拡張する必要があるため、どちらもそうではありません。

私が必要としているのは、それがdiv全体に広がることですが、別のレイヤーにあるかのようにテキストの上にあることです。Z-Indexなしでそれが可能かどうかを判断しようとしています。

4

5 に答える 5

23

の助けを借りて:after-デモ

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

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

解決策としての背景画像はどうですか？私はいくつかのCSSコードを意味します：

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

古き良きファッションの人事担当者はそれを行うかもしれません：

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