Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
                        
                        3年前关闭。
                                                                                            
                
        
我想在我的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>


我希望该列表始终关闭,但仅在用户单击输入或更改其值时才打开它。我希望将元素固定在输入下方,如下所示:

javascript - 如何将元素列表放置在搜索输入下方-LMLPHP

但不移动页面上的任何其他元素。
我不想添加任何库,但自己做。

如何通过CSS做到这一点?

最佳答案

这是您要搜索的吗?



.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中再添加一些像素即可。



编辑:

如果只在用户单击输入时才显示ul,请尝试使用+选择器。

请参阅此处以获取更多信息:CSS Selector Reference | CSS element+element Selector

关于javascript - 如何将元素列表放置在搜索输入下方,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41038545/

10-16 19:54
查看更多