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

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

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

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

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

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

EDIT:

Из ответов я переделаю свой тег <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

Любой трюк, чтобы сделать его выровненным слева?

Ответы

Ответ 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;">

Ответ 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 для всего вашего сайта, и он сохраняет ваши объявления стиля отдельно от вашего макета документа.

Ответ 3

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

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