如何使CSS的搜索結果

Question

如何讓CSS在其他元素的html盈搜索這樣

結果的結果，在含有這樣

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

三江源專家聯繫！

Answer 1

你想搜索的建議？或者如果你想要提供像提供圖像這樣的輸入的建議，所以它是由瀏覽器生成的，如果你想讓用戶生成，那麼它不是用戶生成的，所以<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/

Answer 2

嘗試插入這個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>