Question

我正在尝试构建一个表单，以便将新用户添加到某种实体中。我们的想法是让用户头像在一行中，在行尾有一个输入字段，带有一个输入字段以插入新用户。

几年前我试过这个并最终使用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项目时）作为盒子.form应该宽度缩小。输入的右边是一些像素宽的按钮。输入应占用剩余空间。

这可能在css3中还是需要Javascript？

Answer 1

您可以使用flexbox，也可以在CSS中使用显示表属性。看看：

.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>

您可以在左侧添加所需的所有头像，并自动重新排列输入。

Answer 2

您希望输入相对于某个容器的100％宽度，从头像到按钮。您可以使用table，flexboxes或格式化上下文和浮点数来获取它。

这是最后一个http://jsfiddle.net/53f0yzeL/

注意overflow:hidden的{{1}}规则，它使容器恰好适合浮动元素和.avatars-wrapper侧，这样您就可以100％扩展输入。

输入字段应采用剩余宽度

2 个答案: