Выровняйте <hr> влево по HTML5-совместимому способу

В настоящее время я использую

<hr align="left" />

на моей странице HTML5, но я прочитал, что свойство align было устарело в XHTML 4.01 и предположительно удалено из HTML5. Я бы хотел использовать CSS, а не встроенный атрибут, подобный этому, но когда я попробовал

hr{align: left; max-width: 800px;}

или hr{text-align: left;} или hr{left: 0;} или hr{float: left;}, он просто появился в центре.

Итак, что я должен использовать вместо встроенного атрибута выше?

Ответы

Ответ 1

Вы пытаетесь использовать что-то таким образом, что (как упоминает Элиэзер Бернарт.. и, видимо, этот комментарий со ссылкой на MDN doc исчез) "работает так". Вы можете, пока вы не возражаете против того, чтобы быть вялым в IE, просто установите маржу в ноль - http://jsfiddle.net/s52wb/

hr {
    max-width: 100px;
    margin: 0px;
}

Лучшая идея, однако, заключается в том, чтобы подражать HR-способу делать вещи с помощью CSS без использования HR. Просмотрите http://jsfiddle.net/p5ax9/1/ для демонстрации:

p:first-child:before {
    display: none;
}
p:before {
    content: " ";
    border: 1px solid black;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    max-width: 100px;
}

Ответ 2

Один из вариантов: установить левое поле в ноль:

hr{max-width: 800px; margin-left:0;}

Ответ 3

Я не знаю, какие браузеры использовались для некоторых вышеперечисленных ответов, но я не нашел ни text-align:left, ни margin-left:0, работающих в IE (11, режиме стандартов, HTML5) и Firefox (29).

  • IE11: text-align:left works, margin-left:0 оставляет правило с центром.

  • FF: margin-left:0 works, text-align:left выравнивает правило по центру.

  • Итак, либо используйте оба, либо я обнаружил, что margin-right:100% работает для обоих!

Ответ 4

сделайте это

hr {
   display: inline;  //or inline-block
   text-align: left;
}

Ответ 5

Вместо этого вы можете использовать тег div.

<div style="border: thin solid lightgray; width: 100px;"></div>

Ответ 6

Если вы используете Bootstrap, вы можете добавить класс col-*-offset-0. Например,

<hr class="col-xs-offset-0 col-sm-offset-0 col-md-offset-0" />

Внутренний бутстрап добавьте margin-left:0;.