Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Модификация тега hr

Модификация тега hr


     01.10.2011    Стили (CSS)    3204

вопрос
Подскажите, можно ли модифицировать тег
<hr />
, таким образом, чтоб линия заканчивала текст, такого вида:
Пример текста ---------------------------

т.е. линия должна просто идти после текста. Если прописать float:left; или float:right; - линия вообще не отображается.

Ответил: ПафНутиЙ


<!DOCTYPE HTML>
<html>
<head>
  <title>Ёпта</title>
  <style type="text/css">
  .block {
      background: #fff;
      padding: 10px;
  }

    h2 {
        float: left;
        margin: 0 0 0 0;
        font-size: 20px;
        padding: 0;
    }
    hr {
        margin: 13px 0 0 0;
        height: 0;
        line-height: 0;
        padding: 0;
        border: 0;
        border-top: dashed 1px #ccc;

    }

  </style>
</head>
<body>
    <div class="block">
        <h2>Итак, кто-же этот журналист и с чем его едят?</h2>
        <hr />
        <br clear="all" />
    </div>
</body>
</html>

Комментарии пользователей (1)

compis
2

37 | 38

compis - 2 октября 2011 02:24 - Юзер

Пока только однопиксельной картинкой получается, но все это громоздко...

CSS:
h2 { font-size: 1.2em; }
.zag h2 {margin:0;padding:0 5px 0 0;display:inline-block;background:#fff;vertical-align:middle;line-height:1em;
    //display:inline;
    //zoom:1;}
.zag {margin-top:1.5em;background:url('../images/grey-border-pixel.gif') repeat-x 0 1.2em;}    
* html .zag h2 {display:inline;zoom:1;}
.zag img {vertical-align:baseline;position:relative;top:.1em;}
.zag span {display:inline-block;vertical-align:middle;position:relative;background:#fff;padding:0 5px;
    //display:inline;
    //zoom:1;}
* html .zag span  {display:inline;zoom:1;}


А в новости:
<div class="zag"><h2 class="darkredmini" style="margin: 0.5em ">Итак, кто-же этот журналист и с чем его едят?</h2></div>

Может есть короче..?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы