如何在网络应用程序中加入换行符？ （HTML，CSS）

Question

So I have been researching this for the past 10 or so minutes and am now bringing it to this community. I don't know how to make a break like this:

I know there used to be an "hr" tag like so,

---

but its depreciated and I'd prefer to use something else. Its a common thing for login pages where its Email login "or" login with a social account. If you have any tips or find anything, please link it down below!

Thanks in advance!!

Answer 1

The <hr> is not deprecated.

In HTML5, the <hr> tag defines a thematic break.

In HTML 4.01, the <hr> tag represents a horizontal rule.

However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

All the layout attributes are removed in HTML5. Use CSS instead.

For more check https://www.w3schools.com/tag_hr .

An alternative would be to use for example <div>s and borders (check the snippet):

 .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> 

Answer 2

I personally would use an HR with confidence, but if I didn't want to use HRs I'd try something like this, using the :after selector .

 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>