擴大輸入以取剩餘寬度

此問題是Expand a div to take the remaining width的擴展。擴大輸入以取剩餘寬度

頂部的解決方案非常適合讓div佔用剩餘寬度，但是我在左邊的div中放置了一個輸入。我的期望是輸入會擴展到填充div的剩餘寬度，但是它會跳出div並放置在底部。

注意紅框正確填充寬度，而藍框是固定的。我需要一個輸入框和紅色框一樣：填充剩餘的寬度。

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

來源

2014-09-29 coder

該解決方案已在您提供的鏈接：

.left { 
    overflow: hidden; 
}

JSFiddle

另一個解決方案是增加保證金：

.left { 
    margin-right: 200px; 
}

雖然第一個更靈活。

來源

2014-09-29 18:56:45

我想我喜歡的保證金右更好。我明白你的意思是靈活性，但是有了保證金 - 右邊的輸入框邊界不會被隱藏的溢出中斷。我可以在div上添加一個邊框，但這看起來像一個黑客 – coder 2014-09-29 19:32:02

.container { 
 
    position:relative; 
 
    width:100%; 
 
    height:200px; 
 
    border:1px solid; 
 
} 
 
.right { 
 
    height:200px; 
 
    width:200px; 
 
    background:green; 
 
    float:right; 
 
} 
 
.left { 
 
    width:-webkit-calc(100% - 200px); 
 
    height:178px; 
 
    background:red; 
 
} 
 
.text{ 
 
    position:relative; 
 
    width:100%; 
 
    height:20px; 
 
    margin:0; 
 
    border:0; 
 
    top:178px; 
 
}

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

來源

2014-09-29 19:01:13 AvrilAlejandro

我想要這個沒有calc – coder 2014-09-29 19:27:38

擴大輸入以取剩餘寬度

回答

相關問題