如何根据容器改变元素的宽度？答案

【问题标题】：How to change the width of elements based on container?如何根据容器改变元素的宽度？
【发布时间】：2015-01-12 17:57:07
【问题描述】：

您好，在我的网站中，我有一个带有注册表单元素的容器。现在我想根据容器大小更改标签、文本字段和按钮的大小。

我的要求是当屏幕宽度为 >=1024px 时，文本框应该位于标签的右侧（并且在灰色容器的右边框之前最多扩展 40px - 40px 是容器的填充）。如果屏幕宽度

请建议我这样做的方法。

我还附上了截图：

这里的灰色背景是网站中的容器。

.dnnForm .dnnFormItem {
    clear: both;
    width: 100%;
    display: block;
    position: relative;
    text-align: left;
}
@media screen and (min-width: 1025px)
    #rox-custom-box-06 .dnnForm {
        width: 100%;
    }
@media screen and (min-width: 1025px)
    #rox-custom-box-06 .dnnFormInput, .password-strength-container, .password-strength {
        display: inline-block;
        width: 35% !important;
    }

【问题讨论】：

你能发布你的代码吗？
如果你能create an MCVE，那就太好了。根据您提供的代码，很难推断是否有任何其他干扰样式。此外，您还没有提供任何标记。
我猜你对包含 DIV 的宽度有问题。在也是基于 % 的宽度的容器中声明基于 % 的值存在问题。
只是 CSS 不是很有帮助。请将 HTML 代码添加到，最好作为（可运行的）代码 sn-p。
任何人都可以说如何根据容器宽度和 40px 填充来更改输入字段的宽度。

标签： javascript jquery html css dotnetnuke

【解决方案1】：

要实现这一点，您需要对解决方案进行更细致的思考。

容器和/或表单需要应用特定的 CSS 类，这样您才能使事情正常进行。您还可以考虑在您的皮肤中使用 Bootstrap 或类似工具来提供帮助，因为看起来您正在尝试进行响应式设计，但没有任何支持框架。

否则，更详细的 HTML 示例可能会有所帮助。

【讨论】：