将容器宽度扩展到适合内容之外[关闭]答案

【问题标题】：Expand container width beyond fit-content [closed]将容器宽度扩展到适合内容之外[关闭]
【发布时间】：2021-07-23 02:08:23
【问题描述】：

这是我的表格单元格。它与包含的内容一样宽：

<td class="sticky calltd employeetd" style="width: fit-content;">
    Wintheiser Granville
</td>

有没有办法将容器内部的宽度设置为比“fit-content”长 10 像素，例如：

width: calc(fit-content + 10px); <---- doesn't work

我没有找到相同的问题，但如果有，请在此处链接。

宽度：适合内容；

我需要什么：

蓝色区域必须是没有边距或内边距的内容空间

【问题讨论】：

尝试添加padding-right: 10px?如果您不想在该区域中显示文本，这将起作用。
您不能使用表格进行布局。
为什么不应该是填充？在所有情况下，它都是一个额外的宽度，所以填充可以完美地完成这项工作
@Elias 此类信息应该属于该问题，并且使用填充不会阻止您的悬停效果。如果您想获得准确的答案，最好让您的问题完整并明确您想要达到的目标，不要只使用 10% 的问题
不要告诉我这个，让你的问题更清楚。我们不应该讨论向我解释你想要什么。编辑您的问题以包含所有信息，以便每个人都清楚明确地了解您想要什么，否则没有人可以回答您的问题

标签： html css

【解决方案1】：

它不会赢得任何选美比赛，但这里有一个解决方案，至少可以让你到达我理解你想去的地方：

<td class="sticky calltd employeetd" style="width: fit-content;">
    Sheldon Cooper
    <div style="width: 10px; height: 0px; display: inline-block;"></div>
</td>

这样，您只需在 td 的内容旁边添加一个高度为零（意味着它不可见）和您喜欢的宽度的 div 容器。

如果您的fit-content 属性是根据td 内容的长度计算的，这将扩展10px 的宽度。如果您的 fit-content 是基于其他东西计算出来的，这对您没有帮助。

【讨论】：

【解决方案2】：

一个小研究让我here

戈登的回答提到了以下几点：

CSS 不是“编程语言”。您无法真正做出决策、收集数据或操作该语言不适合做的任何事情。如果你想这样做，javascript 是你最好的选择

我也建议为此使用 JS，但我相信你已经想到了。

此外，请注意以下几点：

如果您对 jQuery 感到满意，您可以使用 $("#postanad").width()。

【讨论】：

如果你认为 CSS 根本不是一种编程语言，那你就大错特错了。
如前所述，它取自另一个问题的答案。