如何在 Web 应用程序中加入换行符？ (HTML,CSS)

Question

所以我在过去 10 分钟左右的时间里一直在研究这个问题，现在我将它带到这个社区。我不知道如何像这样休息：

我知道曾经有一个像这样的 "hr" 标签，

但它已经过时了，我更愿意使用其他标签。对于登录页面来说，这是很常见的事情，它的电子邮件登录 "or" 使用社交帐户登录。如果您有任何提示或发现任何东西，请link在下面！

提前致谢！！

Answer 1

未弃用 <hr>。

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.

更多检查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 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>

如何在 Web 应用程序中加入换行符？ (HTML,CSS)

How do I incorperate a line break in a web app? (HTML,CSS)

html

css

login

web-applications

web