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

あなたが醜い解決策を受け入れているなら、ここに1つがあります：

http://jsfiddle.net/KBZg3/

を活かしtext-align: justify