使輸入佔據剩餘空間？

代碼HTML：

<div class="container"> 
    <div class="box1"> 

    </div> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="John"> 
</div>

CODE CSS：

.container{ 
    width:33%; 
    background:grey; 
} 
.box1{ 
    background:red; 
    width:45px; 
    height:32px; 
    display:inline-block; 
} 
input{ 
    display:inline-block; 
    vertical-align:top; 
    height:32px; 
}

我想要做的就是讓我投入更多並佔據剩餘的空間。

我的容器的寬度以百分比表示，Box1的寬度以像素爲單位（應保留）。

你能告訴我請用什麼方法來解決這個問題？

來源

2016-04-26 John Smith

的一種方式設置爲您input的0，像這樣：

width:calc(100% - 32px);

您可以查閱caniuse.com此功能的瀏覽器的支持。

來源

2016-04-26 08:26:00 Shaggy

使輸入佔據剩餘空間的最佳方式是什麼？

您可以使用box-sizing: border-box屬性和輸入的100％width。

*{ 
    box-sizing: border-box 
}

Fiddle

編輯

澄清想要的輸出後，在這裏與calc()功能的解決方案：

input{ 
    display:inline-block; 
    vertical-align:top; 
    height:32px; 
    width: calc(100% - 49px); 
}

Fiddle

來源

2016-04-26 08:19:19

是的，但在您的示例輸入通過底下..他應該保持符合紅色拳擊 –

是的，但你沒有指定。你要求**輸入**來填充剩餘寬度，所以我猜可能會有誤解 –

我已經使用其他解決方案編輯了我的答案 –

可以使用Flexbox

.container { 
 
    width: 33%; 
 
    background: grey; 
 
    display: flex; 
 
} 
 
.box1 { 
 
    background: red; 
 
    flex: 0 0 45px; 
 
} 
 
input { 
 
    flex: 1; 
 
    height: 32px; 
 
}

<div class="container"> 
 
    <div class="box1"></div> 
 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="John"> 
 
</div>

你也可以做到這一點與CSS表來做到這一點是使用了calc() function

.container { 
 
    width: 33%; 
 
    background: grey; 
 
    display: table; 
 
} 
 
.box1 { 
 
    background: red; 
 
    width: 45px; 
 
    display: table-cell; 
 
} 
 
input { 
 
    display: table-cell; 
 
    width: 100%; 
 
    height: 32px; 
 
}

<div class="container"> 
 
    <div class="box1"></div> 
 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="John"> 
 
</div>

來源

2016-04-26 08:20:08

使輸入佔據剩餘空間？

回答

相關問題