如何将项目列表放在搜索输入下方

Question

我想在html页面中创建自定义搜索输入。

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做到？

Answer 1

这是你在寻找什么？

.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即可。如果您想将列表向右移动，只需向padding-left添加更多px。

修改

如果您只想在用户点击输入时显示ul，请尝试使用+选择器。

请点击此处查看更多信息：CSS Selector Reference | CSS element+element Selector