Wie kann ich einen Zeilenumbruch in einer Web-App integrieren? (HTML, CSS)

Question

Also habe ich das in den letzten 10 Minuten untersucht und bringe es jetzt in diese Community. Ich weiß nicht, wie wie diese eine Pause zu machen:

Ich weiß, es ist früher ein „hr“ Tag wie so,

---

aber sein abgeschrieben sein, und ich würde es vorziehen, etwas anderes zu verwenden. Es ist eine übliche Sache für Login-Seiten, wo der E-Mail-Login "oder" Login mit einem sozialen Account. Wenn Sie irgendwelche Tipps haben oder etwas finden, verlinken Sie es bitte unten!

Vielen Dank im Voraus!

Answer 1

Ich persönlich würde verwenden, um einen HR mit Zuversicht, aber wenn ich nicht wollte:

Eine Alternative zum Beispiel <div>s und borders (überprüfen Sie die Schnipsel) zu verwenden, wäre Um HRs zu verwenden, würde ich so etwas versuchen, mit der .

p { 
 
    text-align: center; 
 
    } 
 
p span { 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    padding: 0 3px; 
 
} 
 
p:after { 
 
    content: ''; 
 
    display: block; 
 
    border-bottom: 1px solid black; 
 
    margin-top: -8px; 
 
}

<p><span>or</span></p>

Answer 2

Die <hr> ist nicht veraltet.

In HTML5 definiert der Tag <hr> einen thematischen Bruch.

In HTML 4.01 stellt das <hr>-Tag eine horizontale Regel dar.

Allerdings kann das Tag <hr> in visuellen Browsern immer noch als horizontale Regel angezeigt werden, ist jetzt jedoch in semantischen und nicht in formalen Begriffen definiert.

Alle Layout-Attribute werden in HTML5 entfernt. Verwenden Sie stattdessen CSS.

Für weitere Überprüfung https://www.w3schools.com/tag_hr.

.thisIsFormContainer 
 
{ 
 
    position:relative; 
 
    float:left; 
 
    border:1px solid #000; 
 
    border-radius:4px; 
 
    text-align:center; 
 
    padding:20px; 
 
} 
 

 
.top 
 
{ 
 
    position:relative; 
 
    width:90%; 
 
    margin:0px auto 10px auto; 
 
    padding:0; 
 
    border-bottom:1px solid #09f; 
 
} 
 

 
.fieldGroup 
 
{ 
 
    position:relative; 
 
    width:90%; 
 
    margin:0px auto 0px auto; 
 
    padding:0; 
 
    text-align:left; 
 
} 
 

 
.item 
 
{ 
 
    position:relative; 
 
}

<div class="thisIsFormContainer"> 
 
    <div class="top"> 
 
    <div class="item">Send us an email!</div> 
 
    </div> 
 
    <div class="fieldGroup"> 
 
    <div class="item">Address:</div> 
 
    <div class="item">Country:</div> 
 
    </div> 
 
    <div class="fieldGroup"> 
 
    <div class="item">State:</div> 
 
    <div class="item">City:</div> 
 
    </div> 
 
</div>