Html 在文本的右侧和左侧添加行

我有以下HTML和CSS：

正文{
文本对齐：居中；
}
div{
边框：1px纯黑；
保证金：0自动；
宽度：200px；
}
p{
边框：1px纯红；
线高：0.5；
利润率：20px；
文本对齐：居中；
}
跨度{
显示：内联块；
位置：相对位置；
}
跨度：之前，
跨度：之后{
内容：“；
位置：绝对位置；
高度：5px；
边框底部：1px纯黑；
排名：0；
宽度：100%；
}
跨度：之前{
右：100%；
右边距：20px；
}
跨度：之后{
左：100%；
左边距：20px；
}

短语

使用

左：0

和

右键：0

以确保行保持在边框内

p

上的边距是阻止它填充整个容器宽度的原因

此外，实际上并不需要跨度

正文{
文本对齐：居中；
}
div{
边框：1px纯黑；
保证金：0自动；
宽度：200px；
}
p{
边框：1px纯红；
线高：0.5；
/*边距：20px；跨全宽*/
文本对齐：居中；
位置：相对位置；
}
p:以前，
p:之后{
内容：“；
位置：绝对位置；
高度：1px；
背景：黑色；
最高：50%；
转化：translateY（-50%）；
宽度：20%；
}
p:以前{
左：0；
}
p:之后{
右：0；
}

短语

我保留了您原来的CSS，但对其中大部分内容进行了注释。FlexBox是实现您想要的功能的好方法（与

position:absolute

和

position:relative

相反）：

/*正文{
文本对齐：居中；
}*/
div{
边框：1px纯黑；
保证金：0自动；
宽度：200px；
}
p{
边框：1px纯红；
/*线高：0.5*/
/*利润率：20px*/
/*文本对齐：居中*/
}
跨度{
显示器：flex；
/*位置：相对位置*/
/*宽度：100%*/
对齐项目：居中；
}
跨度：之前，
跨度：之后{
内容：“；
/*位置：绝对位置*/
/*高度：5px*/
边框底部：1px纯黑；
/*排名：0*/
宽度：100%；
}
跨度：之前{
/*右：100%*/
右边距：20px；
}
跨度：之后{
/*左：100%*/
左边距：20px；
}

短语

我不确定我是否理解这个问题。您是否尝试过将跨度宽度设置为100%；或者您需要的是25%？p填充整个宽度减去20px边距。从副本：现在，您可以使用flex和psudos，而不是绝对位置，以避免副作用和额外标记；）当然，我这里没有提供最终解决方案，但是，为了解决op指出的问题，flex也可能会把你搞砸，在某些情况下，当出现溢出的滚动条时，你会丢失数据。使用flex和pseudos，当有空间时会出现行。如果内容填满整个空间，它将缩小到0；）。绝对让事情脱离流程，这就是为什么它会以意想不到的方式把事情搞砸；）