CSS：固定內部div的位置

Question

我正試圖在div中導入用戶的Facebook好友。 Friend Divs定位不正確。他們正在根據名字的長度混淆。

Note:I was not able to show full name of friends because it was hard to fit in a small Friend Div. 

CSS

#jfmfs-friend-container { 
    overflow:scroll; 
    overflow-x: hidden; 
    -ms-overflow-x: hidden; 
    width:100%; 
    height:7.6em; 
    color: #333; 
    background-color: #F7F7F7; 
    padding-top: 10px; 
} 
.jfmfs-friend {     
    cursor:pointer; 
    float:left; 
    height:3em; 
    width:12em; 
    font-size:11px; 
    overflow:hidden; 
    display:inline-block; 
    margin-bottom: 0.40em; 
} 
.friend-name { 
    padding-left: 5px; 
    width: 60px; 
    font-weight: bold; 
    color: #000; 
    font-size: 12px; 
} 

.friend-checkbox { 
    position: relative; 
    vertical-align:middle; 
    margin: 0px 0px 0px; 
} 

.friend-img { 
    padding-left: 5px; 
    width: 28px; 
    height: 28px; 
} 

HTML

<div id="jfmfs-friend-container"> 
<div class="jfmfs-friend " id="00000000000"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/000000000/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000012"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000012/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000330"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000330/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000044"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000044/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000880"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000880/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
<div class="jfmfs-friend " id="00000000770"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/00000000770/picture" class="friend-img"><span class="friend-name">hhhhhHy uuuu</span></div> 
</div> 

實際結果：

Answer 1

嘗試增加display:inline-block;到.friend-name

喜歡這個 - jsFiddle

.friend-name { 
    display:inline-block; 
    padding-left: 5px; 
    width: 70px; 
    font-weight: bold; 
    color: #000; 
    font-size: 12px; 
}