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

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的更详细的示例可能会有所帮助。