如何在網絡應用程序中加入換行符？ （HTML，CSS）

Question

因此，過去十分鍾左右，我一直在對此進行研究，現在將其帶入這個社區。 我不知道該如何休息：

我知道曾經有一個像這樣的“ hr”標簽，

---

但它已經貶值了，我更喜歡使用其他東西。 對於登錄頁面，這是很常見的，其電子郵件登錄“或”使用社交帳戶登錄。 如果您有任何提示或發現什么，請在下面將其鏈接！

提前致謝！！

Answer 1

不建議使用<hr> 。

在HTML5中， <hr>標記定義主題中斷。

在HTML 4.01中， <hr>標記表示水平線。

但是， <hr>標記仍可以在視覺瀏覽器中顯示為水平規則，但現在是用語義術語而不是表示性術語定義的。

HTML5中刪除了所有布局屬性。 改用CSS。

有關更多信息，請訪問https://www.w3schools.com/tag_hr 。

一種替代方法是使用例如<div>s和borders （檢查代碼段）：

 .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

我個人會很有信心地使用HR，但是如果我不想使用HR，則可以使用：after選擇器嘗試類似的操作。

 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>