H5W3
当前位置:H5W3 > 其他技术问题 > 正文

input宽度不自适应

所有的input的是处于一个行内,存在info这个div中,info和input的宽度都是设置百分比,正常来说应该随着页面的缩小而缩小,然后三个input依旧处在一行不对吗?

图片描述
实际操作确实这样的。

图片描述
应该如何让页面缩小时,input宽度缩小,然后处在一行不掉下一个呢?

大致代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content {
            border:1px solid red;
            width:64%;
            overflow: hidden;
        }
.info,.textarea-box {
    width:98%;
    margin:10px 2% 10px 2%;
}
.info input,.textarea-box {
    box-sizing:border-box;
    padding:8px 10px;    
}
.info input {
    min-width:30%;
    margin-top:5px;
    width:32%;
}
.textarea {
    width:98%;
}
    </style>
</head>
<body>
    <div class="content">
       <div class="info">
  <input type="text" name="author" id="author" class="text" placeholder="昵称">
  <input type="email" name="mail" id="mail" class="text" placeholder="邮箱" >
     <input type="url" name="url" id="url" class="text" placeholder="网站">
             </div>
       <div class="textarea-box">
           <textarea rows="8" name="text" id="textarea" class="textarea"></textarea>
</div>
</div>
</body>
</html>

回答:

.info{
    display: flex;
}
.info > input{
    flex: 1;
}

回答:

这个问题是内联块状元素间的间距问题,也就是属性为display:inline-block的元素。因为他们之间的默认间距影响了元素的布局,你可以设置父元素的font-size:0。这是一种解决方案。你也可以在网上搜索其他更优的解决方案。

回答:

如果你想在小屏幕有好的效果,我建议你设置为响应式布局(根据不同屏幕尺寸匹配不用的样式);
如果你不需要考虑响应式布局,那么这里我建议你使用flex布局;
参考
https://codepen.io/MrAndrewMc…

或者添加样式

.info {
    display: table;
}

即可。

回答:

为什么不试一下弹性盒呢?

.info {
    display: flex;
}

下面是效果,只给.info加了flex

clipboard.png
clipboard.png

回答:

flex估计是最优解决方案

本文地址:H5W3 » input宽度不自适应

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址