正確放置下拉格

我有一個輸入字段，充當我的Web應用程序的搜索欄。當用戶開始使用JQuery進行輸入時，會出現＃search-suggestions div，並使用AJAX提供建議。現在，我爲我的JSFIDDLE取出了JQUERY和AJAX，但通常情況下該div是隱藏的，直到您開始鍵入爲止（例如，我只是將其視爲可見）。如何將＃search-suggestions div直接放在輸入中？什麼是正確的CSS？正確放置下拉格

的jsfiddle：http://jsfiddle.net/nFEnz/

CSS：

#search-suggestions { 
padding: 0px 0px 10px 0px; 
height: auto; 
width: 298px; 
border: 1px solid #ddd; 
border-radius: 4px 4px 4px 4px; 
background-color: #fff; 
}

謝謝！

來源

2013-07-09 user2320500

加上'明確：both'以'＃搜索suggestions' – Zefiryn

試試這個。 http://jsfiddle.net/nFEnz/9/

#search { 
    float: left; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    height: 28px; 
    width: 293px; 
    border: 1px solid #ddd; 
    border-radius: 4px 4px 4px 4px; 
    -webkit-box-shadow: #EEE 0px 2px 6px 0px inset; 
    background-color: #fff; 
    position:relative; 
} 

#search input { 
    float: left; 
    outline: none; 
    height: 28px; 
    width: 265px; 
    border: none; 
    background: transparent; 
    font-family: calibri; 
    font-size: 16px; 
    color: #777; 
} 

#search-icon { 
    cursor: pointer; 
    float: left;  
    height: 28px; 
    width: 28px; 
    border: none; 
    background: transparent; 
} 

#search-icon img { 
    height: 20px; 
    width: 20px; 
} 

#search-suggestions { 
    padding: 0px 0px 10px 0px; 
    height: auto; 
    width: 298px; 
    border: 1px solid #ddd; 
    border-radius: 4px 4px 4px 4px; 
    background-color: #fff; 
    position:absolute; 
    top:31px; 
} 

#loading-suggestions { 
    margin-top: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 40px; 
    width: 40px; 
} 

#loading-suggestions img { 
    height: 40px; 
    width: 40px; 
} 

.search-suggestion { 
    padding: 5px 10px 5px 10px; 
    height: auto; 
    width: 278px; 
    overflow: auto; 
} 

.search-suggestion:last-child { 
    padding: 5px 10px 0px 10px; 
} 

.search-suggestion-picture { 
    float: left; 
    height: 50px; 
    width: 50px; 
    border: 1px solid #ddd; 
    border-radius: 4px 4px 4px 4px; 
    overflow: hidden; 
} 

.search-suggestion-picture img { 
    height: auto; 
    min-height: 50px; 
    width: 50px; 
} 

.search-suggestion-stuff { 
    float: left; 
    margin: 0px 0px 0px 10px; 
    height: 50px; 
    width: 200px; 
} 

.search-suggestion-name { 
    height: 50px; 
    width: auto; 
} 

.search-suggestion a { 
    text-decoration: none; 
    margin: 0px 0px 5px 0px; 
    padding: 0px 0px 0px 0px; 
    font-family: calibri; 
    font-weight: bold; 
    font-size: 16px; 
    color: #444; 
    line-height: 50px; 
} 

.search-suggestion a:hover { 
    text-decoration: underline; 
}

來源

2013-07-09 17:25:17 Srinivas

充分利用#search爲position:relative和#search-suggestions是position:absolute並有top:100%。

#search { 
    ... /*your current styles*/ 

    position:relative; /*ADDED THIS LINE*/ 
} 

#search-suggestions { 
    ... /*your current styles*/ 

    position:absolute; /*ADDED THIS LINE*/ 
    top:100%; /*ADDED THIS LINE*/ 
    left:0; /*ADDED THIS LINE*/ 
}

演示在http://jsfiddle.net/nFEnz/7/

來源

2013-07-09 17:28:59

正確放置下拉格

回答

相關問題