Как сделать <hr> полную ширину?

Question

http://jsfiddle.net/bh2f6/1/

Я хочу сделать это <hr/> так он будет растягиваться на всю ширину, прямо к краям родительского контейнера. Я попытался добавить margin-left/padding-right, чтобы преодолеть это, но он меняется при изменении размера (отзывчивый).

Есть ли лучшее решение для этого?

Редактировать: Я не могу редактировать дополнение родительского контейнера, как это необходимо для группировки других элементов.

Answer 1

Ваш width:100%; на <hr /> и padding на родителя были Мессинг вещи вверх. <hr /> естественно растягивается по экрану и не нуждается в width:100%, поэтому удалите его. Затем, чтобы компенсировать заполнение, просто добавьте тот же отрицательный запас к <hr />.

Изменение CSS к этому:

.single-article hr { 
    margin: 30px -20px 20px; 
    border: 0; 
    border-top: 1px solid #c9c7c7; 
} 

See working jsFiddle demo

Answer 2

Вы имеете в виду вот это?

Fiddle

просто изменить отступы для padding: 20px 0;

Answer 3

Удаление Перетяжка должно работать для вас

Working Example

.single-article .article-container-inner { 
    background: #f0eded; 
    border: 1px solid #c9c7c7; 
    margin-bottom: 20px; 
} 
.single-article hr { 
    margin-top: 30px; 
    margin-bottom: 20px; 
    border: 0; 
    border-top: 1px solid #c9c7c7; 
    width:100% 
} 

Answer 4

hr css 
width:150%; 
margin-left: -25%; 

Parent div with overflow:hidden 

Answer 5

Нечто подобное могло бы работать ...

hr { 
    padding: 50px 0; 
    border: none; 

    &:before { 
    // full-width divider 
    content: ""; 
    display: block; 
    position: absolute; 
    right: 0; 
    max-width: 100%; 
    width: 100%; 
    border: 1px solid grey; 
    } 
} 

http://codepen.io/achisholm/pen/ZWNwmG