我可以更改网站上的删除线的垂直位置吗？

I'm applying the strikeout tag

我正在使用删除标记

<s>$5,000,000</s>

But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?

但线路太低了......从底部开始大约1/4，而不是从中间开始。我可以通过任何方式修改它，以便在中间进行更多操作吗？

5 个解决方案

#1

You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.

你不能用strike标签或text-decoration：line-through样式来做。线路位置是内置的。你可以为此推出自己的风格，但这将是一个巨大的PITA。

#2

I've cooked up this code which gives you total control over strike-through position and style:

我已经编写了这段代码，让你可以完全控制穿透位置和风格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css"> 

    .mark {
        border-bottom: 1px solid #000;
        top: -9px; /* Tweak this and the other top in equal, but opposite values */
        position: relative;
    }
    .offsetMark {
        position: relative;
        top: 9px; /* Tweak this and the other top in equal, but opposite values */
    }   

</style>     
</head>     
<body>        
<div>     
    <p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>     
</div>

</body>
</html>

#3

Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.

没有打击标记，没有。它是浏览器渲染引擎的一部分。对于我（在Chrome中），线条呈现在中间位置上方。

#4

This solution allows for padding, and uses the csss line-through property It works for firefox, and chrome/ safari does it right anyway.

这个解决方案允许填充，并使用csss line-through属性它适用于firefox，而chrome / safari无论如何都能正常运行。

div.hbPrice span.linethroughOuter {
    padding: 0 10px 0 0;
    text-decoration: line-through;
    position: relative;
}
div.hbPrice span.linethroughInner {
    position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter,  x:-moz-any-link  { bottom:  2px; }
div.hbPrice span.linethroughInner,  x:-moz-any-link  { top:  2px; }

and the mark up is something like...

而标记就是......

<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>

The other solution is to add a background image of a line, and make it the same colour as the text.

另一种解决方案是添加一条线的背景图像，并使其与文本颜色相同。

#5

You could do something like this:

你可以这样做：

<div class="heading"><span>Test heading</span></div>

.heading {
  position: relative;
  text-align:center;
}
.heading:before {
  background-color: #000000;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
}
.heading span {
  background-color: #fff;
  display: inline-block;
  padding: 0 2px;
  position: relative;
  text-align: center;
}

http://codepen.io/anon/pen/cLBls

#1