Html CSS：内部div的固定位置

我正在尝试在div中导入用户的facebook好友。

好友div

未正确定位。根据名字的长度，它们是杂乱无章的

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>

HHHHHHHYUUU
HHHHHHHYUUU
HHHHHHHYUUU
HHHHHHHYUUU
HHHHHHHYUUU
HHHHHHHYUUU

实际结果：

---

尝试添加

显示：内联块至
。朋友姓名

像这样-

您的html无效。id属性不能包含#，也不应以数字开头。它可以做到这一点，但现在会出现全名，并且不适合div高度。朋友的名字在这里是一个问题，他们可能很长，所以如果他们不适合在div中，只想叫他们的名字。在你的小提琴中，名字的高度超过图像的高度。太棒了！很好。谢谢。
.friend-name  {
    display:inline-block; 
    padding-left: 5px;
    width: 70px;
    font-weight: bold;
    color: #000;
    font-size: 12px;
}