使 HTML 元素大于其兄弟元素，受最大/屏幕尺寸限制

Posted 2023-03-05

【中文标题】使 HTML 元素大于其兄弟元素，受最大/屏幕尺寸限制

【英文标题】：Make HTML element bigger than its sibling, limited by max/screen size

【发布时间】：2022-01-05 18:46:15

【问题描述】：

我正在尝试在其下方绘制带有下划线的文本，这样下划线将跨越到两侧最多 300 像素。当整个 300 像素没有空间时，该数量应减少以为文本腾出空间。 这是宽屏的正确行为：

这是薄屏的正确行为：

我尝试在 width: 300px 的“你好”的两侧放置空 div，但效果不佳：

<div style="width: fit-content; display: flex; flex-direction: column;">
    <div style="display: flex; flex-direction: row;">
        <div style="width: 300px;"></div>
        <p>Hello</p>
        <div style="width: 300px;"></div>
    </div>
    <hr style="width: 100%;">
</div>

如果我在父级中设置width: fit-content，我会在宽屏幕上得到正确的行为，但在薄屏幕上，侧面不会最小化，并且分隔线会剪裁到屏幕外。

如果我没有在父项中设置宽度，我会在薄屏幕上获得正确的行为，但在宽屏幕上，分隔线会填充整个屏幕宽度，而不是每边仅多出 300 像素。

【问题讨论】：

为什么不使用 flex-grow 来平均占用剩余空间，而不是硬固定宽度？或者更简单的方法是将文本放入跨越整个宽度的单个元素并为该元素使用底部边框。使用 text-align 使文本居中。

我不明白您如何使用您提到的方法将边扩展 X 像素。你能发布一个代码示例吗？

【参考方案1】：

我不确定你真正想要什么，但你可以试试这个： （在那个 div 中添加这个：max-width: 300px;width: 100%; ）

<div style="width: fit-content; display: flex; flex-direction: column;">
    <div style="display: flex; flex-direction: row;">
        <div style="max-width: 300px;width: 100%;"></div>
        <p>Hello</p>
        <div style="max-width: 300px;width: 100%;"></div>
    </div>
    <hr style="width: 100%;">
</div>

【讨论】：

这个解决方案根本不起作用，边会被延长0像素。