Как украсить тег <hr />

Question

Я хочу иметь горизонтальную линейку со следующими характеристиками:

align:left
noshade
size:2
width:50%
color:#000000

Если бы вышеупомянутые атрибуты не устарели, я бы использовал:

<hr size="2" width="50%" noshade style="color:#000000" align="left" />

Я сейчас думаюиспользования только атрибута стиля.Есть ли уловки, чтобы заставить HR отображать одинаково в нескольких браузерах?

---

РЕДАКТИРОВАТЬ:

Из ответов я переделал свой тег <hr /> на:

<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>

Однако в Firefox свойство text-align: left , похоже, не действует, так как горизонтальное правило выглядит центрированным.Впрочем, в Opera и IE он отлично работает.Я экспериментировал со своим кодом здесь:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

Есть ли уловка, чтобы выровнять его по левому краю?

Answer 1

В 2015 году большинство браузеров, похоже, отображают HR как блочный элемент с нулевой высотой и границей вставки 1px. Вы можете изменить свойства следующим образом:

p { font: italic large serif; text-align: center; }

<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred; 
           margin-right: 50%;           ">

<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred; 
           margin-left: 50%;">

<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
           border-style: solid;
           border-color: palevioletred; 
           width: 50%;
           margin-left: auto;
           margin-right: auto;">

Answer 2

Чтобы ответить на ваш вопрос:

«Есть ли уловка, чтобы выровнять его по левому краю?»

Я бы просто добавил «display: inline-block;»к атрибуту стиля в вашем предыдущем коде.Ваш законченный код будет выглядеть так:

<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />

Я проверял это в Chrome, IE и Firefox, и он работал в каждом.Дополнительную документацию и совместимость с браузером можно найти здесь: CSS2 - Декларация отображения

В примечании к сторонам было бы лучше добавить этот стиль во внешнюю или внутреннюю таблицу стилей вместо добавленияэто встроенный.Таким образом, вы можете иметь стандартизированный элемент hr для всего вашего веб-сайта, и он хранит ваши объявления стилей отдельно от макета вашего документа.

Answer 3

Почему бы не сделать картинку, а затем ввести этот код в CSS ???

            hr {
        height:43px; /*(image height)*/
        width:50%;
    background-image:url("hr-tag-image.png"); /*Your image file*/
/*Demo: https://heckles.typrograms.com */
}