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

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

HTML: How to change the width of input field based on container size

html

css

asp.net

jquery

`JSFiddle Demo (Resize result pane)`