HTML：如何根据容器大小更改输入字段的宽度

Question

我有一个Asp.net表单，因为我有两个使用容器。在一个容器中我插入了一些段落值，而在其他容器中我已经放置了注册页面元素。

我的注册页面没有标签和文本字段。我想在页面宽度大于1024时将文本字段与标签右侧对齐，如果页面大小小于1024，那么我希望下面的文本字段为标签。

如何在css中进行更改。请帮忙解决这个问题。 我正在上传图片，以便您更好地了解我。

在这里你可以看到当我打开我的网站到我的手机时，它就像这样显示我。我只想在屏幕尺寸小于1024时在标签下方设置输入字段。

感谢。

Answer 1

您可以使用@media调整到不同的屏幕宽度：

@media (min-width:1025px){
    input{
        display:inline-block;
    }
}
@media (max-width:1024px){
    input{
        display:block;
    }
}

<label for="name">Name:</label><input type="text" name="name"/>

JSFiddle Demo (Resize result pane)

Answer 2

<强> HTML

<label>this is lable</label>
<div class="text">
    <input type="text"/>
</div>

<强> CSS

label{
    float:left;
}
.text{
    overflow:hidden;
    padding:0 0 0 20px;
}
.text input{
    width:100%;
    box-sizing:border-box;
    padding:5px 15px;
}
@media only screen and (max-width: 1024px) {
    label{
        display:block;
    }
    .text{
        clear:both;
        padding:0;
    }
}

Demo