В настоящее время я использую
<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;}, он просто появился в центре.
Итак, что я должен использовать вместо встроенного атрибута выше?
Вы пытаетесь использовать что-то таким образом, что (как упоминает Элиэзер Бернарт.. и, видимо, этот комментарий со ссылкой на 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;
}
Один из вариантов: установить левое поле в ноль:
hr{max-width: 800px; margin-left:0;}
Я не знаю, какие браузеры использовались для некоторых вышеперечисленных ответов, но я не нашел ни 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% работает для обоих!
сделайте это
hr {
display: inline; //or inline-block
text-align: left;
}
Вместо этого вы можете использовать тег div.
<div style="border: thin solid lightgray; width: 100px;"></div>
Если вы используете Bootstrap, вы можете добавить класс col-*-offset-0. Например,
<hr class="col-xs-offset-0 col-sm-offset-0 col-md-offset-0" />
Внутренний бутстрап добавьте margin-left:0;.