Я применяю тег вычеркивания
<s>$5,000,000</s>
Но линия слишком низкая...it около 1/4 снизу, а не через середину. В любом случае, я могу изменить это, чтобы он прошел немного по середине?
Я применяю тег вычеркивания
<s>$5,000,000</s>
Но линия слишком низкая...it около 1/4 снизу, а не через середину. В любом случае, я могу изменить это, чтобы он прошел немного по середине?
Вы не можете сделать это с помощью тега забастовки или стиля text-decoration:line-through
. Положение линии встроено. Вы могли бы использовать свой собственный стиль для этого, но это был бы огромный PITA.
Я приготовил этот код, который дает вам полный контроль над ударами и стилем:
<!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>
Не с ярлыком забастовки, нет. Это часть механизма рендеринга браузера. Для меня (в Chrome) линия отображается чуть выше середины.
Это решение позволяет заполнять и использует свойство сквозной передачи csss Он работает для firefox, а хром/сафари все равно прав.
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; }
и отметка - это что-то вроде...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
Другое решение - добавить фоновое изображение строки и сделать его тем же цветом, что и текст.
Вы можете сделать что-то вроде этого:
<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;
}