javascript - 如何根据容器更改元素的宽度？

Question

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

我的要求是，当屏幕宽度为 >=1024px 时，文本框应位于标签的右侧(并在灰色容器的右边框之前最多扩展 40px - 40px 无论如何是容器的填充)。如果屏幕宽度 <1024，则文本框应位于标签下方，并且它们的宽度应与灰色容器的宽度减去容器在左侧和右侧的内边距一样长。

请建议我这样做的方法。

我还附上了截图:

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

.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;
    }

Answer 1

要实现这一点，您需要从本质上更细化地思考您的解决方案。

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

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