輸入應具有可能的最大寬度

Question

我有一個像這個小提琴類似的HTML結構： http ： //jsfiddle.net/hAMmK/3/

HTML結構：

\n <span class =“all”>\n      <span class =“group-1”>\n          <span class =“a”> A </ span>\n          <span class =“b”> <input type =“text”placeholder =“b”/> </ span>\n      </跨度>\n      <span class =“group-2”>\n          <span class =“c”> C </ span>\n          <span class =“d”> D </ span>\n      </ span> </ span>\n

css的當前結果是

但我希望的結果是

這個結果應該是響應的，我的意思是，輸入文本的寬度應該是設備/瀏覽器的正確當前寬度的最大值。 此外，我需要與最常見的瀏覽器（如移動/平板電腦的桌面）兼容。

解決這個問題的最佳方法是什么？

Answer 1

使用CSS3 Calc ： 運行演示

input[type="text"]{        
    width: calc(100% - 100px);
}

但是， 在所有地方都不支持 ，你需要知道要減去的寬度。

Answer 2

如果你的按鈕是靜態的，即你知道左/右跨度的寬度/數量，那么你可以使用浮點數。 它提供了更平滑的響應感覺，但使用了有時不那么好的負邊距。

我將CSS更改為：

.group-1 {
    width: 20px;
    float: left;
    margin-top: 6px;
}
.group-2 {
    margin-left: 30px;
    margin-right: 70px;
}
.group-3 {
    width: 60px;
    float: right;
    margin-top: -20px;
}

看看： http ： //jsfiddle.net/hAMmK/16/

就像我說的那樣，只有你可以修復你的左/右寬度，但它似乎能提供干凈的響應感覺。

Answer 3

更改寬度以使用百分比。

.a {
     padding: 3px 7px;
    background-color: LightBlue;
    border: 2px solid CornflowerBlue;
    border-radius: 5px;
    color: SteelBlue;
    width: 10%;
}
.c {
    padding: 3px 7px;
    background-color: Moccasin;
    border: 2px solid BurlyWood;
    border-radius: 5px;
    color: DarkKhaki;
    width: 10%;
}
.d {
    padding: 3px 7px;
    background-color: LightSalmon;
    border: 2px solid Brown;
    border-radius: 5px;
    color: IndianRed;
    width: 10%;
}
input{
    width: 70%;
}

JS小提琴： http ： //jsfiddle.net/hAMmK/4/

Answer 4

作為css3樣式計算的替代，如果你需要支持其他瀏覽器，這是另一種解決方案。

如果A是一個標簽而C和D是按鈕（我猜），你可以在輸入字段中使用寬度100％並將其向左浮動，然后你必須顯示阻止其父級（如果它是一個跨度，就像那個案例一樣）並添加一個邊距 - 右邊的sime大小比你的按鈕。 邊距將會崩潰，因為內容已浮動，按鈕將顯示在輸入字段的右側。

如果您知道其大小，則可以對標簽執行相同操作，或者您可以更好地使用表來更改標簽文本（可能用於國際化）。

您可以看到它應用於您的示例：

http://jsfiddle.net/cTd2e/

/*Styles for position here*/
.all{
    line-height: 22px;
}
table {
    width: 100%;
    float: left;
}
.second-cell input{
    width: 100%;
    float: left;
}
.b {
    display: block;
    margin-right: 130px;
}
td.first-cell {
    white-space: nowrap;
}
td.second-cell {
    width: 100%;
}
.group-2{
    vertical-align: middle;
    margin-left: 10px;
}

此外，如果按鈕包含文本，則可以使用表格內的表格使輸入字段為100％，其余字段為自動。

我不知道是否有更現代的兼容方式，這將是偉大的！