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

Hi in my website I have one container with Registration form elements. Now I want to change the size of labels, Text fields and button based on the container size.

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

My requirement is The textboxes should be on the right of the labels (and expand up to 40px before the right border of the grey container - 40px is the container's padding anyway) when the width of the screen is >=1024px . If the width of the screen is <1024, the textboxes should be under the labels and their width should be as long as that of the grey container minus the container's padding on the left and on the right side.

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

Please suggest me the way to do this.

请建议我这样做的方法。

I have also attached a screenshot:

我还附上了截图:

Here background with grey color is the container in website.

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

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

1 个解决方案

#1

To accomplish this you are going to need to think a bit more granular in nature with your solution.

要实现这一目标,您需要在解决方案中考虑更为细化。

The Container &/or form will need to have specific CSS classes applied so that you can then make things work. You might also look at using Bootstrap or similar in your skin to assist as it looks like you are trying to make a responsive design, but without having any supporting framework.

容器和/或表单需要应用特定的CSS类,以便您可以使工作正常。你也可以在你的皮肤中使用Bootstrap或类似的东西来协助,因为它看起来像你正在尝试做出响应式设计,但没有任何支持框架。

Otherwise, a more detailed example with your HTML could assist.

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

1 个解决方案

#1

更多相关文章

随机推荐