HR-тег для охвата всей страницы?

-1

Я использую тег HR на моей странице HTML. Но горизонтальная линия не покрывает всю страницу вдоль оси X. Есть пробел слева и справа. Как я могу заполнить этот пробел?HR-тег для охвата всей страницы?

Например, ниже приведен пример кода -

<html> 
    <hr> 
</html>

источник

2013-06-29 tik

Вы можете сделать следующее ->demo

У вас есть два варианта, которые я знаю в любом случае - с помощью горизонтальной линии или DIV с верхняя или нижняя граница.

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

CSS

* { 
    margin:0; 
    padding:0; 
} 
hr { 
    margin-top: 30px; 
    /*so you can see it in demo */ 
    width: 100% 
} 
.demo { 
    position: relative; /*so I could use 'top: 30px' */ 
    top: 30px; 
    /*so you can see it in demo*/ 
    width: 100%; 
    border-top:1px solid black; 
}

HTML

<hr/> 
<div class="demo"></div>

Edit: Как прокомментировал Ojdo, вы можете сбросить перед началом работы над проектом, используя что-то вроде этого Meyer's Reset или вы можете сделать это кросс-браузер "совместимый и используйте normalize.css от Necolas - это в основном пытается сделать ваш CSS по умолчанию устойчивым среди нескольких браузеров. Выбор в конечном счете зависит от вас. Начните с нуля или начинайте с чего-то согласованного.

источник

2013-06-29 10:07:09

Вместо того, чтобы использовать чистый сброс Маринг/обивка, обеспечивают кросс-браузер по умолчанию, как [normalize.css ] (https://github.com/necolas/normalize.css). – ojdo

Что делать, если он не хочет сбросить все свои значения по умолчанию? Я мог бы, однако, упомянуть об этом. –

Он не может, но IMHO '* {/ * anything * /}' уже имеет серьезные последствия для любых значений по умолчанию. Тем не менее, хороший ответ. – ojdo

Это из-за полей тела. попробуйте это:

<html> 
    <body style="margin:0;"> 
    <hr> 
    </body> 
</html>

источник

2013-06-29 10:14:44 Faridzs

положить эту CSS на час:

hr { 
    margin-left: -8px; 
    margin-right: -8px; 
}

Это происходит всегда есть автоматический запас

Вот скрипку пример:

http://jsfiddle.net/ha97t/

источник

2013-06-29 10:14:47 Hive7

Разрывы вызваны по умолчанию в размере 8 пикселей для body (который является общим браузером по умолчанию и описан как в CSS 2.1, так и в HTML5 CR).

Вы можете переопределить горизонтальную маржу body довольно просто:

body { margin-left: 0; margin-right: 0 }

можно использовать более широкие переопределения, как «CSS сбрасывает», но они могут повлиять на макет страницы во многих отношениях и не способствуют решению этой проблемы лучше, чем просто переопределение конкретных свойств для body.

Однако удаление этих полей означает, что текст будет работать от левого края до правого края, часто делая буквы касаются краев. Поэтому, если вы хотите, чтобы горизонтальное правило распространялось на страницу без каких-либо изменений, установите отрицательные поля на нем. Тогда лучше установить body поля явно (для защиты от браузеров не осуществляет их в соответствии с общепринятой практикой):

body { margin: 8px } 
hr { margin-left: -8px; margin-right: 8px }

источник

2013-06-29 11:03:52

HR-тег для охвата всей страницы?

ответ

Смежные вопросы