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

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

要实现这一点，您需要在您的解决方案中考虑更细粒度的问题。

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

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