html - 尝试在 div 中平均分配元素以填充之间的空间

Question

尝试生成一个表格，该表格将在 div 中平均分配每条信息。

这就是它现在的样子，我正在尝试将事物分开：

 <section id="databox" class="databox">
     <div id="'+cursor.value.userName +'"><span>' + 
        cursor.value.userName + '</span> | <span>' + 
        cursor.value.fn+ '</span> | <span>'+ 
        cursor.value.ln+ '</span> | <span>'+ 
        cursor.value.pw+ '</span> | <span>'+ 
        cursor.value.em+ '</span> | <span>'+ 
        cursor.value.dob+ '</span> | <span>'+
        cursor.value.tel+ '</span> | <span>'+ 
        cursor.value.scl+ '</span> | <span>'+
        cursor.value.gender+ 
        ' <input type="button" onclick="removeobject(\'' + cursor.value.userName + '\')" value="remove"/></div>'
 </section>

CSS：

  .databox{
    color:white;
    padding: 2px 10px;
}
#databox div{
    text-align: justify;
}
#databox div span{
    display: inline-block;

}
.databox div:nth-child(odd){
    padding-top: 3px;
    padding-bottom: 3px;
    background: rgba(255,255,255,0.1); 
    margin-bottom: 6px;
}
.databox div:nth-child(even){
    background:rgba(255,255,255,0.3);
    padding-top: 3px;
    padding-bottom: 3px;    
    margin-bottom: 6px;
}
#databox div:after{
    width:100%;
    display: inline-block; 
}

Answer 1

如果您愿意接受丑陋的解决方案，那么这里有一个：

http://jsfiddle.net/KBZg3/

占（某人）的便宜text-align: justify