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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这个问题是内联块状元素间的间距问题，也就是属性为display:inline-block的元素。因为他们之间的默认间距影响了元素的布局，你可以设置父元素的font-size:0。这是一种解决方案。你也可以在网上搜索其他更优的解决方案。
如果你想在小屏幕有好的效果，我建议你设置为响应式布局（根据不同屏幕尺寸匹配不用的样式）；
如果你不需要考虑响应式布局，那么这里我建议你使用flex布局；
参考
https://codepen.io/MrAndrewMc...
或者添加样式
即可。
为什么不试一下弹性盒呢？
下面是效果，只给
.info加了flex：flex估计是最优解决方案