輸入字段應採取餘下的寬度

我想建立一個表格來添加新的用戶到某種實體。這個想法是讓用戶頭像排成一行，並且在行的末尾有一個輸入字段，用於插入新用戶。輸入字段應採取餘下的寬度

我在幾年前試過這個，並最終使用JavaScript，因爲我無法在普通的css（2）中做到這一點。

最大的問題：這是在css3中的某種可能嗎？

的代碼基本思想：

<div class="availableWidth"> 
    <div class="list"> 
    <ul> 
    <li><div class="avatar">...</div></li> 
    ... 
    </ul> 
    </div> 
    <div class="form"> 
    <div class="typeaheadField"> 
     <input ...> 
    </div> 
    <button>+</button> 
    </div> 
</div>

CSS：

.list ul li { 
    list-style-type:none; 
    display:inline-block; 
} 

button { 
    width:50px; 
}

基本思想是，盒子.availableWidth具有一定寬度（100％）的框.LIST生長在寬度（添加新的li項目時），因爲box .form的寬度應該縮小。輸入的權利是一些像素寬的按鈕。輸入應該佔用剩餘的空間。

這可能在css3或我會需要Javascript？

來源

2015-09-24 Tobi

不僅沒有小提琴，你也從打字到手寫:) – maioman

@maioman我只爲你添加了一些小提琴;-) – Tobi

您可以使用flexbox，或者您可以在CSS中使用display table屬性。請看：

.container { 
 
    display: table; 
 
    width: 100%; 
 
    position:relative; 
 
} 
 
.avatar { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: table-cell; 
 
} 
 
.input { 
 
    height: 50px; 
 
    display:table-cell; 
 
    vertical-align: middle; 
 
} 
 
.input input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
}

 <div class="container"> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="input"> 
 
      <input type="text"/> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="container"> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="input"> 
 
      <input type="text"/> 
 
     </div> 
 
    </div>

您可以添加所有你想在左側輸入自動重新排列化身。

來源

2015-09-24 13:10:26

您希望相對於從頭像到按鈕的某個容器輸入100％的寬度。您可以通過使用表格，柔性盒或格式化上下文和浮點數來獲取它。

這裏是最後一個http://jsfiddle.net/53f0yzeL/

通知overflow:hidden規則.avatars-wrapper，它使容器適合完全浮動元素和.avatars側之間這樣就可以讓輸入100％寬。

來源

2015-09-24 13:21:40 antejan

輸入字段應採取餘下的寬度

回答

相關問題