正确放置下拉格

我有一个输入字段，充当我的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

正确放置下拉格

回答

相关问题