Ik moet na een blok een horizontale lijn tekenen, en ik heb drie manieren om dat te doen:
1) Definieer een klasse h_lineen voeg er CSS-functies aan toe, zoals
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Gebruik hrtag
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) gebruik het als een afterpseudoklasse
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Welke manier is het meest praktisch?
Antwoord 1, autoriteit 100%
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>Antwoord 2, autoriteit 42%
Ik zou voor semantische opmaak gaan, gebruik een <hr/>.
Tenzij u alleen een rand wilt, kunt u een combinatie van opvulling, rand en marge gebruiken om de gewenste rand te krijgen.
Antwoord 3, autoriteit 7%
In HTML5 definieert de tag
<hr>een thematisch einde. In HTML 4.01, de
<hr>tag staat voor een horizontale regel.
http://www.w3schools.com/tags/tag_hr.asp
Dus na definitie zou ik liever <hr>
Antwoord 4, autoriteit 7%
Als je echt een thematische pauzewilt, gebruik dan zeker de <hr>-tag.
Als je alleen een ontwerplijn wilt, kun je zoiets als de css-klasse gebruiken
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
en gebruik het als
<div class="block_1 hline-bottom">Cheese</div>
Antwoord 5, autoriteit 6%
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>Antwoord 6, autoriteit 4%
Ik wilde een lange streepjeslijn, dus heb ik deze gebruikt.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}<div class="dash"></div>Antwoord 7
Mijn eenvoudige oplossing is om HR te stylen met CSS om ZERO TOP & AMP te hebben; Bodemmarges, nulrand, 1 pixelhoogte en contrasterende achtergrondkleur.
Dit kan worden gedaan door de stijl rechtstreeks in te stellen of door een klasse te definiëren, bijvoorbeeld zoals:
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
Antwoord 8
Het is afhankelijk van vereiste, maar veel ontwikkelaars-suggesties zijn om uw code als eenvoudig mogelijk te maken.
Dus, ga met eenvoudige “HR” -tag
en CSS-code voor dat.
Antwoord 9
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>Antwoord 10
Dit is relatief eenvoudig voorbeeld en werkte voor mij.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https: // www .w3docs.com / snippets / CSS / HOW-T-STYLE-A-horizontale-line.html