Html 如何制作响应性水平尺

我正在尝试调整这个hr，以便它可以出现在手机上的一条线上。此代码适用于桌面视图，但对于移动设备，它会跳转到中断hr的行

div{
文本对齐：居中；
}
人力资源{
显示：内联块；
宽度：30%；
}

一起

选项一： 使用单个全宽（或者可能是90%？）

---

但将

移动到一起

使其位于顶部

备选方案二： 在CSS中使用

calc

，使每个

---

的宽度为（父项的宽度-一起的宽度）/2

---

（在这种情况下，猜测30%的宽度太脆弱了）。

你估计的20像素的宽度是不可能的。 下面我用了8em，但你可能想调整一下

div{text align:center；}
hr{显示：内联块；宽度：计算（（100%-8em）/2）；}

一起

如果“

---

”标记是自动关闭（“

---

”）的，这会很有帮助，可以明显看出应该有两个标记，第二个标记不是“”的打字错误这是我在CSS div{text align:center；}hr{display:inline block；width:calc（（100%-20px）/2）；}中尝试过的代码！我明白了。谢谢你的帮助