Могу ли я изменить вертикальную позицию перечеркивания на веб-сайте? - PullRequest
Новая
       18

Могу ли я изменить вертикальную позицию перечеркивания на веб-сайте?

21 голосов
/ 23 марта 2010

Я применяю зачеркнутый тег 

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

Но линия слишком низкая ... примерно на 1/4 снизу, а не посередине. В любом случае, я могу изменить это так, чтобы оно проходило немного посередине?

Ответы [ 5 ]

9 голосов
/ 23 марта 2010

Вы не можете сделать это с помощью метки забастовки ИЛИ стиля text-decoration:line-through. Положение линии встроено. Вы могли бы сделать свой собственный стиль для этого, но это была бы огромная PITA.

8 голосов
/ 24 марта 2010

Я подготовил этот код, который дает вам полный контроль над позицией и стилем зачеркивания: 

<!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>
2 голосов
/ 23 марта 2010

Не с меткой забастовки, нет. Это часть движка рендеринга браузера. Для меня (в Chrome) линия отображается чуть выше середины.

1 голос
/ 22 июля 2010

Это решение допускает заполнение и использует линейное сквозное свойство csss. Оно работает для 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; }

и разметка выглядит примерно так... 

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

Другое решение - добавить фоновое изображение линии и сделать его таким же цветом, что и текст.

0 голосов
/ 06 октября 2014

Вы можете сделать что-то вроде этого: 

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...