Comment faire <hr> toute la largeur?

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

Je veux faire cette <hr/> donc, il va s'étirer sur toute la largeur, de la droite vers les bords de son conteneur parent. J'ai essayé d'ajouter de la marge gauche/padding-right pour surmonter cela, mais il ne cesse de changer lors du redimensionnement (responsive).

Est-il une meilleure solution?

Edit: je ne peux pas modifier le conteneur parent de rembourrage qui est nécessaire pour des tas d'autres éléments.

  • C'est l'un des nombreux exemples qui montrent m'css est horrible.
InformationsquelleAutor user3187469 | 2014-02-20
  1. 13

    Votre width:100%; sur le <hr /> et la padding sur les parents étaient gâcher les choses. Le <hr /> naturellement s'étend à travers l'écran et n'a pas besoin de width:100%, donc l'enlever. Alors pour compenser pour le remplissage, il suffit d'ajouter la même marge négative de la <hr />.

    Modifier votre CSS pour cela:

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

    Voir travail jsFiddle démo

    InformationsquelleAutor Code Maverick
  2. 2

    De retirer le Rembourrage doit travailler pour vous

    Exemple De Travail

    .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%
}
    • Non, je ne peux pas modifier le conteneur parent de rembourrage qui est nécessaire pour des tas d'autres éléments.
    InformationsquelleAutor Jatin
  3. 2

    Quelque chose comme ça pourrait fonctionner...

    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

    InformationsquelleAutor Alistair Chisholm
  4. 1

    Vous dire comme ça?

    Violon

    il suffit de changer le rembourrage pour padding: 20px 0;

    • Non, je ne peux pas modifier le conteneur parent de rembourrage qui est nécessaire pour des tas d'autres éléments
    • Je comprends. Ensuite, vous devriez vérifier le Code de Maverick réponse. Il fait le truc avec le maintien de la marge. 😉
    InformationsquelleAutor Sebsemillia
  5. 0

    RH Secret des choses, que vous devez savoir.

    Lorsque votre horizontal rule (rh) feuilles 15px à gauche et à droite, probablement lorsque vous utilisez avec bootstrap.

    <hr class="my-hr-line">

.my-hr-line {
    position: relative;
    left: -15px;
    width: calc(100% + 30px);
    height: 2px;
    border: 2px solid blue;
}

    Espère que ça va aider beaucoup de un.

    InformationsquelleAutor ArifMustafa