如何为搜索结果制作CSS

Question

如何使用CSS搜索这样的结果

结果在其他元素html的前面，包含这样的链接

<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>

谢谢专家！

Answer 1

尝试将此css插入每个选择左或右的

<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.left {
float: left;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>

Answer 2

你想要搜索建议吗？或者如果你想要提供关于输入的建议，比如提供图像所以它是由浏览器生成的，如果你想要用户生成的话，那么它不是用户生成的，所以<ul><li></li></ul>最适合它。否则在您的图像输入建议是浏览器生成而不是用户从浏览器缓存生成它。

如果它是由ajax请求或其他东西生成的，那么它可以设置样式，否则你无法设置这样的建议。

<强> HTML

<div class="form-group">
<input type="text" class="suggested_input">
<ul class="suggestions">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>

<强> CSS

.form-group{
 width:250px;  /*as you want*/
 position:relative;
 padding:0px;
 margin:0px;
}
ul.suggestions{
 width:100%; /* its width according to input width */
 border:1px solid #ccc;
 height:auto;
 display:none;
 padding:0px;
 margin:0px;
}
/* if you want style so that's why i use "li a" also */
ul.suggestions li, 
ul.suggestions li a{
 background-color:#fff;
 color:#000;
 font-size:12px; /* according to your requirement */
 font-family:arial;
 font-weight:normal;
 padding:0 10px;
 margin:0px;
 line-height:30px; /* according to your requirement */
 display:block;
}
ul.suggestions li:hover,
ul.suggestions li a:hover{
 background-color:#ccc;
 color:#000;
 text-decoration:normal;
}
ul.suggestions li:hover .suggested_input{
 background-color:#FAFFBD;
 border:1px solid #3C8DBC;
}
.suggested_input:hover .suggestions{
display:block;
}

示例：https://jsfiddle.net/hamzanisar/rzwqsrs1/