Html ：css创建问题后

我一直面临一个问题——我需要为电子商务网站制作一个分类页面。客户要求的设计描述了他们需要在类别标题后获得一条水平线（这是动态的）

这部分我已经做了

但是，当客户端需要更改类别名称时，会出现问题。在所附图片中，上面写着“类别2”。客户可以将其更改为“男士系列”、“冬季系列”、“男士系列”或其他任何类型

问题是，由于我们不知道该类别名称将占用的宽度，如何管理水平线的宽度（在红色框中突出显示）

我还把我应用的css的截图放在屏幕上

由于线条的位置是绝对的，所以需要对宽度进行管理

如何管理此宽度？：(

---

IDK为什么我的问题被降级

不过，我做了一件小事情，效果很好=>

对于“排序方式”部分，我将背景颜色设置为白色

对于包含category的整行：在line和Sort By section之后，我隐藏了溢出

---

这很好，但是如果我能找到其他方法来工作，我会很感激的。

使用

flexbox

来解决问题-请参见下面的示例：

.wrapper{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.包装工：之后{
内容：''；
弹性：1；
高度：1px；
背景：#ccc；
左边距：10px；
}

类别名称

如果将：after元素的宽度指定为一个百分比，那么它应该是动态的。因为它得到的是父元素的宽度（即标题），所以宽度将根据标题的百分比量进行调整。

请注意，我还需要管理“排序方式”按钮在那里！我不确定这在那里是否也能正常工作…@r0nn13为包装器提供一个类似的flexbox，其中包括此项和“排序依据”部分…您的问题被“降级”，因为有问题寻求调试帮助（“此代码为什么不能工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些行为所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建问题我已经包括了所需的行为、特定的问题，甚至代码。我相信我的问题也很清楚。嗯，没关系。我从这里学到了一些东西，所以我想这没什么大不了的。：）你需要包括实际的代码，而不是它的图片