我为我的应用程序实现了facebook样式搜索建议功能。但是,我在这里面临一些问题。
i)下面是搜索框和结果div代码:
搜索结果会显示在#display div中,如下所示:
在我们在搜索区域输入任何内容之前,这就是页面的外观:
以下是搜索结果div正在做的事情:
基本上,它会在我的主要内容区域中显示菜单。那么如何使用CSS解决这个问题?
以下是样式:
后台菜单div的
(包含选项主页,历史和设置
.menuBar .submenu {
padding:4px 12px 5px 12px;
margin-right:8px;
border:2px solid #EEE;
text-decoration:none;
display:inline-block;
float:left;
font-size:13px;
-moz-border-radius:40px;
border-radius:40px;
-webkit-border-radius:40px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
color:#333;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#765), to(#FFF));
background: -webkit-linear-gradient(#000, #FFF 70%);
background: -moz-linear-gradient(#BBB, #FFF 100%);
background: -ms-linear-gradient(#765, #FFF 70%);
background: -o-linear-gradient(#765, #FFF 1000%);
background: linear-gradient(#765, #FFF 70%);
-pie-background: linear-gradient(#765, #FFF 70%);
}
我的搜索框
:
#searchbox {
border: 1px solid #000000;
padding: 3px;
width: 250px;
}
以及各个结果的display_box:
.display_box {
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}