如何使輸入[type = text]填充剩餘的水平空間？

Question

有沒有任何想法如何做？ 我創建了這個小提琴http://jsfiddle.net/matusko/2pctr9ok/3/，我想要做的就是，輸入的行爲與上面的div相同。

CSS：

.left { 
    float:left; 
    width:180px; 
    background-color:#ff0000; 
} 
.right { 
    width: 100%; 
    background-color:#00FF00; 
    display: block; 
} 

HTML：

<div> 
    <div class="left"> 
     left 
    </div> 
    <div class="right"> 
     right 
    </div> 
</div> 
<br/> 
<div> 
    <div class="left"> 
     left 
    </div> 
    <input type="text" placeholder="right" class="right"/> 
</div> 

我不明白爲什麼輸入犯規行爲像格，甚至當禮檢查員表示，其顯示效果塊。

Answer 1

您可以在CSS中使用calc爲您動態計算寬度。

示例如下：

.left { 
 
    float: left; 
 
    width: 180px; 
 
    background-color: #ff0000; 
 
} 
 
.right { 
 
    width: calc(100% - 180px); 
 
    background-color: #00FF00; 
 
    display: inline-block; 
 
} 
 
input[type="text"] { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
}

<div> 
 
    <div class="left">left</div> 
 
    <div class="right">right</div> 
 
</div> 
 
<br/> 
 
<div> 
 
    <div class="left">left</div> 
 
    <div class="right"> 
 
    <input type="text" placeholder="right" /> 
 
    </div> 
 
</div>

Answer 2

它看起來像寬度：100％是造成這個問題。改變輸入的寬度將允許它與左邊div在同一行。

input.right { 
    width: 77%; 
} 

http://jsfiddle.net/vov70ymd/

並不完美，但希望幫助。

Answer 3

對於< IE9我建議以下http://jsfiddle.net/2pctr9ok/4/

把左下角的position:absolute，在overflow:hidden整個底部塊和應用padding-left:180px在輸入。