Html 两小时'；s在同一条线上，中间有空格

所以我得到了上面的设计，我正试图找出处理“我们是谁”文本下面两行的最佳方法我的第一个编码本能是将两个hr标签放在同一行上，这是我到目前为止得到的：

.center{
文本对齐：居中；
}
.我们是谁{
背景色：#19A1B9；
背景：#4A9FB6；
宽度：100%；
高度：200px；
}

我们是谁




Lorem ipsum dolor sit amet，奉献精英。这是一种生活方式，是一种生活方式，是一种生活方式，是一种生活方式。我是马克西姆，我是托坦。伊普苏姆，多洛里巴斯

也许可以尝试将这两个hr放在一个单独的div中，并将它们设置为inline块

.center{
文本对齐：居中；
}
.我们是谁{
背景色：#19A1B9；
背景：#4A9FB6；
宽度：100%；
高度：200px；
}
.分离器{
宽度：40%；
显示：内联块；
}
.左{
浮动：左；
}
.对{
浮动：对；
}

我们是谁




Lorem ipsum dolor sit amet，奉献精英。这是一种生活方式，是一种生活方式，是一种生活方式，是一种生活方式。我是马克西姆，我是托坦。伊普苏姆，多洛里巴斯

标记定义了HTML页面中的主题中断（例如，主题转换）

由于您需要这些行用于样式设置，因此在语义上更为正确的做法是使用两个具有底部边框的

div

s，并将

display:inline block

彼此相邻：

.divider {
  display: inline-block;
  border-bottom: white 1px solid;
  width: 100px;
  margin: 30px;
}

---

您还需要一些规则来将它们居中。

线条是装饰性的。您不需要将它们放在HTML中

使用CSS和flex属性

.title{
显示器：flex；
柔性包装：包装；
}
.title>h1{
弹性：0.100%；
}
.标题：：之前{
内容：“；
弹性：0.40%；
顺序：1；
利润率：10px自动；
边框顶部：1px纯白；
}
.标题：：之后{
内容：“；
弹性：0.40%；
顺序：2；
利润率：10px自动；
边框顶部：1px纯白；
}
.中心{
文本对齐：居中；
}
.我们是谁{
背景色：#19A1B9；
背景：#4A9FB6；
宽度：100%；
高度：200px；
}

我们是谁
Lorem ipsum dolor sit amet，奉献精英。这是一种生活方式，是一种生活方式，是一种生活方式，是一种生活方式。我是马克西姆，我是托坦。伊普苏姆，多洛里巴斯

HR是块级元素，因此它将采用全宽。你有两个选择，我可以考虑。将两个div并排放置，形成一个包含两列的表格

2个分区：

<div class="hr"><hr></div>
<div class="hr"><hr></div>

<style>
.hr{
    width: 50%;
    float: left;
    padding: 10px 50px;
    box-sizing: border-box;  
}
</style>

.hr{
宽度：50%；
浮动：左；
填充：10px 50px；
框大小：边框框；
}

这是一张桌子：

<table class="hrTable">
  <tr>
    <td><hr></td>
    <td><hr></td>
  </tr>
</table>

<style>
   .hrTable{width:100%}
   .hrTable td{width:50%; padding:20px 50px; }
</style>

.hr表格{宽度：100%}
.hrTable td{宽度：50%；填充：20px 50px；}

下面是一个使用这两个示例的示例

.center{
文本对齐：居中；
}
.我们是谁{
背景色：#19A1B9；
背景：#4A9FB6；
宽度：100%；
高度：200px；
}
.分离器{
宽度：40%；
显示：内联块；
}
.左{
浮动：左；
}
.对{
浮动：对；
}

我们是谁




Lorem ipsum dolor sit amet，奉献精英。这是一种生活方式，是一种生活方式，是一种生活方式，是一种生活方式。我是马克西姆，我是托坦。伊普苏姆，多洛里巴斯

拥有一个

hr

并按照您想要的方式设计它会更有意义。您如何将hr分为两部分？是的，所有人都能做到，干杯！谢谢，我刚刚在实际的网站上进行了测试，即使在手机上也能很好地工作，这很好，因为我讨厌写媒体查询。我同意，除了两个div在语义上更正确的部分。如果有的话，标题应该是带有底部边框的东西，尽管不确定是否有一种简单的方法可以在边框上实现两行效果。

在语义上没有意义，它不添加上下文，应该主要用于样式设置。这些行也用于样式设计，它们不会为任何机器人或屏幕阅读器的内容添加任何上下文。我同意如果可能的话，它们可以成为标题的一部分。嗨，你能编辑你的答案，添加问题是什么以及你的解决方案的解释吗？