如何在項目列表下方搜索輸入

的html代碼：

<input type="text" class="form-control"/> 
     <ul class="list-group"> 
      <li class="list-group-item" ng-repeat="item in list track by $index">{{item}}</li> 
     </ul>

，我想總是被關閉的名單，但只有當用戶點擊輸入或更改其值將其打開。我想要的元素被固定在下面輸入，這樣的事情：

，但沒有頁面上移動任何其他元素。
我不想要添加任何庫，但自己做。

我該如何做到這一點的CSS？

來源

2016-12-08 Ariela

你忘了javascript代碼的人，在這裏粘貼 – madalinivascu

js代碼是空的。我想知道在那裏寫什麼，或者如何在沒有代碼的情況下寫。 – Ariela

您是否在發佈此問題之前做了適當的研究？ – madalinivascu

這是你在尋找什麼？

.list-group { 
 
    background-color: white; 
 
    display: none; 
 
    list-style-type: none; 
 
    margin: 0 0 0 10px; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 150px; 
 
} 
 

 
.list-group > li { 
 
    border-color: gray; 
 
    border-image: none; 
 
    border-style: solid solid none; 
 
    border-width: 1px 1px 0; 
 
    padding-left: 5px; 
 
} 
 

 
.list-group > li:last-child { 
 
    border-bottom: 1px solid gray; 
 
} 
 

 
.form-control:focus + .list-group { 
 
    display: block; 
 
}

<input type="text" class="form-control" /> 
 
<ul class="list-group"> 
 
    <li class="list-group-item" ng-repeat="item in list track by $index">a) ...</li> 
 
    <li class="list-group-item" ng-repeat="item in list track by $index">b) ...</li> 
 
    <li class="list-group-item" ng-repeat="item in list track by $index">c) ...</li> 
 
    <li class="list-group-item" ng-repeat="item in list track by $index">d) ...</li> 
 
</ul> 
 

 
<div id="just_a_sample">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l</div>

如果是的話，只是改變了ul的CSS。如果您想將列表移動到右側，只需將一些px添加到padding-left即可。

編輯：

如果你想顯示ul只有在輸入用戶點擊，嘗試使用+選擇。

查看此處瞭解更多信息：CSS Selector Reference | CSS element+element Selector

來源

2016-12-08 11:48:11

我認爲'ul'必須稍微向右移動約5-10px，我們看到了Ariela夢寐以求的樣子。 – Banzay

@Banzay謝謝。我糾正了它。 –

@Patrick請看我的編輯，希望我的問題現在更清楚。 – Ariela

如何在項目列表下方搜索輸入

回答

相關問題