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; 
} 

타석 구성 요소의 스타일링에 도움을 줄 수 있습니까?

Answer 1

나는 해결책을 찾아 냈다. 이 문제를 겪고있는 다른 누군가의 희망에 게시.

이 구성 요소가 생성하는 기본 html은 스타일이 '인라인 블록'으로 설정되어 있습니다. 이것은 그것을 다른 행으로 밀어 내리고있었습니다. typeahead에 대한 스타일 요소가 디스플레이에 인라인으로 설정된이 문제가 해결되었습니다.

.tt-suggestion { 
    display: inline; 
}