Typeahead.js造型問題

Question

我正在嘗試使用來自Twitter的Typeahead.js。一切看起來都很好，除了TextBox比預期的起點低11個像素外。

我按照文檔中的建議對組件進行了樣式設計。

.tt-dropdown-menu { 
    width: 280px; 
    margin-top: 12px; 
    padding: 8px 0; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    box-shadow: 0 5px 10px rgba(0,0,0,.2); 
} 

.tt-suggestion { 
    padding: 3px 20px; 
    font-size: 18px; 
    line-height: 24px; 
} 

.tt-suggestion.tt-is-under-cursor { 
    color: #fff; 
    background-color: #0097cf; 
} 

.tt-suggestion p { 
    margin: 0; 
} 

有人可以幫助typeahead組件的造型嗎？

Answer 1

我想出瞭解決方案。寄希望於其他人遇到這個問題。

該組件的默認html生成器已將樣式設置爲'inline-block'。這是推動到另一排。具有typeahead的樣式元素並將顯示設置爲內聯固定。

.tt-suggestion { 
    display: inline; 
}