顯示：表和表內嵌

我想使一個以下佈局：顯示：表和表內嵌

[___][_***______________________________________________] 
[___][_***______________________________________________] 
[___][_***______________________________________________] 
[___][_***____________________________________][__][____]

不含恆星的元素是固定寬度的，具有分應該填補所有剩餘空間。

這裏是我想出了標記：

HTML：

<div class="wrapper"> 
<div class="label">text</div><input type="text" class="valueField"/> 
<div class="label">text</div><input type="text" class="valueField"/> 
<div class="label">text</div><input type="text" class="valueField"/><div class="label">text</div><input type="text" class="valueField" id="fixed_valueField"/> 
</div>

CSS：

.wrapper { display:table; width:100%; } 
.wrapper > * { display:table-cell; width:auto; } 
.label { width:5%; } 
#fixed_valueField { width:15%; }

，但在第三行我輸入的元素不填充所有可用空間：

[___][_***______________________________________________] 
[___][_***______________________________________________] 
[___][_***______________________________________________] 
[___][_***________________][__][____]

將不勝感激任何建議。

來源

2013-11-26 user2814036

'[___]'是YOUT'label'和'[_ *** ______________________________________________ ]'你的輸入'？ – NoobEditor

是的。並且最後一個元素也被輸入。 – user2814036

剩餘的百分比添加到您的CSS和重要到你的ID覆蓋：

.valueField { width: 80%; } 
#fixed_valueField { width: 15% !important; }

這應該工作

來源

2013-11-26 11:19:41 MikaldL

不幸的是，沒有工作。 – user2814036

#fixed_valueField保留大約一半的空間，即使我把100％。當我把20％這樣的較小值縮小到20％時，但在大約一半的屏幕後它不會增長。 – user2814036

更聰明的方式來實現你的目標是使用<label>標籤，而不是div標籤因爲它提供了更好的流程來形成元素！

DEMO JSFiddle

HTML

<div class="wrapper"> 
     <label for="">text<input type="text" class="valueField"/></label> <br > 
     <label for="">text<input type="text" class="valueField"/></label> <br > 
     <label for="">text<input type="text" class="valueField"/></label> <br > 
     <label for="">text<input type="text" class="valueField"/></label> <br > 
     <label for="">text<input type="text" class="valueField"/></label> <br > 
     <label for="">text<input type="text" class="span6"/><input type="text" class="span2"/><input type="text" class="span2"/></label> <br > 
</div>

CSS

label { width:100%;} 
input {width:80%;margin-left:2%;border:1px solid #CCC} 
.span6{width:45%} /*css for last row inputs*/ 
.span2{width:15%} /*css for last row inputs*/

來源

2013-11-26 11:51:35 NoobEditor

更新小提琴鏈接考慮您的最後一行輸入！ – NoobEditor

實際上它工作正常，但並不完全符合我的想法。我想用自動而不是手動計算，因爲例如如果我改變填充或爲元素添加較粗的邊框，那麼整個佈局將會爭奪。 – user2814036

顯示：表和表內嵌

回答

相關問題