Question

您好请参阅以下链接。

<div class="parent">
<div class="child-a">
    <input type="text" name="name" value="" class="name" placeholder="Name:" data-autosize-input='{ "space": 40 }' />
</div>
<div class="child-b">
    <input name="email" placeholder="Email:" class="email">
</div>

我并排做了两个输入。第一个（名称）根据文本的长度调整大小。第二个（电子邮件）具有最小宽度，因此当名称变得超过50％时，电子邮件将向下移动到下一行。我发现了两个问题。

第一个问题是当电子邮件输入向下移动时，它不会覆盖整个宽度并保持50％即最小宽度。有没有办法解决它，以便电子邮件在向下移动时覆盖整个宽度。

第二个问题是名称比父边界更长，它超出了框。有没有办法在父母的内部停止？

您可以从下面的图片中看到当您的名字比父母更宽并且电子邮件不覆盖整个宽度时的样子。

谢谢。

Answer 1

使用CSS @media查询

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    input.email{
        width:100% !important;
    }
}

当设备宽度范围为320-480像素时，将执行此操作，所有普通手机应覆盖该范围，否则您也可以在拖动和调整浏览器大小时执行此操作。

@media only screen and (min-width : 320px) and (max-width : 480px) {}

这些称为CSS媒体查询，您可以在此处阅读W3schools

Answer 2

好的，这是一个黑客攻击，因为我们不想编辑自动调整大小的插件

添加到CSS

.big {
    width:100% !important;
    clear:both;
}
.big > input{
    width:100% !important;
}

添加到JS

setInterval(function(){
   if( $('.child-a > input').width()>$('.child-a').parent().width()/2){
    $('.child-a,.child-b').addClass('big');
   }else{
     $('.child-a,.child-b').removeClass('big');
   }
},200);

在您调整大小或在不同设备的高度和宽度上显示您的webapp时，请忘记他们工作的媒体查询。

自动调整大小输入及其邻居输入问题

2 个答案: