搜索結果列表的Css - 引導程序

Question

我正在將搜索結果顯示在網頁上。這個網頁使用twitter bootstrap，但我無法找到任何我想要的bootstrap ready-to-go樣式。不過，我使用twitter bootstrap的經驗不是很豐富，所以可能有些我不知道的東西。

由於我沒有發現適合我的需要，我曾嘗試以下任何Twitter的引導的東西：

<div id="searchResults" class="inner-content"> 
    <ul class="multiColumn"> 
     <li class="userPresentation userid2"> 
      <a class="removeFromShortList close" href="#" title="shortlist.searchResult.removeFromShortListLabel"> 
       <i class="icon-minus-sign"></i> 
      </a> 
      <div class="userContent"> 
       <img class="img-rounded pull-left" src="/assets/img/default_avatar_50x50.png" alt="profileImage"> 
       <a href=" /viewProfile/2" class="userName" title=" Single line"> 
        Single line 
       </a> 
      </div> 
     </li> 
    </ul> 
</div> 

使用CSS，看起來像這樣：

.inner-content { /* border */ 
    margin-bottom: 14px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    border: 1px solid rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); 
    overflow: hidden 
} 
ul.multiColumn,ul.multiColumn li { 
    margin: 2px; 
    padding: 0px; 
} 
ul.multiColumn li.userPresentation { 
    display: inline-block; 
    min-height: 54px; 
    max-height: 54px; 
    width: 150px; 
    max-width: 150px; 
    background-color: #eee; 
    line-height: 13px; 
} 
ul.multiColumn li.userPresentation .userContent { 
    margin: 2px; 
    font-size: 12px; 
} 

這似乎做工精細，但以下情況除外：

1. 如果其中一個用戶名被包裝到兩行或更多行，那些不被推送如下圖所示。
2. 我想要隱藏溢出的文本並顯示...。在這裏我可能需要使用jquery插件？
3. 我無法垂直居中放置用戶名。

這是一些測試數據結果：

如果有任何CSS或引導師的在那裏，我將非常感謝伸出援助之手在這裏。如果有任何好的引導的方式來顯示這樣的數據是需要介質寬度考慮進去，這將是超;）

Answer 1

1. 只需添加vertical-align: bottom;：

   ul.multiColumn li.userPresentation { 
       display: inline-block; 
       min-height: 54px; 
       max-height: 54px; 
       width: 150px; 
       max-width: 150px; 
       background-color: #eee; 
       line-height: 13px; 
       vertical-align: bottom; 
   } 
   

2. 對於溢出省略號，使用此：

   ul.multiColumn li.userPresentation .userContent a { 
       display: inline-block; 
       white-space: nowrap; 
       width: 100%; 
       overflow: hidden; 
       text-overflow: ellipsis; 
       vertical-align: center; 
   } 
   

3. 施加在上述過程之後，變得垂直居中。