鍍金池/ 問答/HTML5  HTML/ input寬度不自適應

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>
回答
編輯回答
萢萢糖

flex估計是最優(yōu)解決方案

2017年12月25日 05:58
編輯回答
落殤

為什么不試一下彈性盒呢？

.info {
    display: flex;
}

下面是效果，只給.info加了flex：

clipboard.png
clipboard.png

2018年9月21日 10:39
編輯回答
孤慣

如果你想在小屏幕有好的效果，我建議你設置為響應式布局（根據(jù)不同屏幕尺寸匹配不用的樣式）；
如果你不需要考慮響應式布局，那么這里我建議你使用flex布局；
參考
https://codepen.io/MrAndrewMc...

或者添加樣式

.info {
    display: table;
}

即可。

2017年11月20日 05:50
編輯回答
負我心

這個問題是內聯(lián)塊狀元素間的間距問題，也就是屬性為display:inline-block的元素。因為他們之間的默認間距影響了元素的布局，你可以設置父元素的font-size:0。這是一種解決方案。你也可以在網上搜索其他更優(yōu)的解決方案。

2017年1月31日 13:51
編輯回答
笨小蛋
.info{
    display: flex;
}
.info > input{
    flex: 1;
}
2018年2月23日 08:33