所有的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>