html - 如何垂直溢出 HTML ul list 过去的 form 和 div 标签？-6ren

html - 如何垂直溢出 HTML ul list 过去的 form 和 div 标签？

转载作者：太空宇宙更新时间：2023-11-04 00:38:03

我在构建我的第一个搜索栏/引擎时遇到了这个问题。问题是作为无序列表的搜索结果只显示最后一个列表元素，而不是显示所有列表元素。我希望列表溢出或传递父项 <form>和 <div>标签，我尝试了 CSS 溢出，但没有用。

编辑:

网页链接:http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_01/Lab_1.html

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div class="sideBtn">

                <a href="Lab_1.html">Home</a>
                <a href="Lb1Labs.html">Labs</a>
                <a href="Lb1Projects.html">Projects</a>
                <a href="https://qwfepfp.blogspot.com/2019/09/blog-intromy-bio-2.html">Blogger</a>
                <a href="http://techteach.us/index.html">Techteach.us</a>
                <a href="http://techteach.us/Web2020/">Parent Directory</a>

                <!--Basic Search Bar.-->
                <form id="srchFrm">
                    <input id="srchBar" type="text" placeholder="Search...">
                    <button type="submit"><i class="fa fa-search"></i></button>


                <ul id="srchRslts">
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">!</a></li>
                </ul>

                </form>
            </div>
</body>
</html>

CSS

.sideBtn {
  position: relative;
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  align-content: center;
  align-items: center;
  text-align: center;
  line-height: 30px;
  flex: 1;
}

.sideBtn a{
  height: 32px;
  color: #000000;
}

.sideBtn a:hover {
    background-color: #22B0FF;
    cursor: pointer;
}

/**Search bar 
Credit goes to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_searchbar3
**/
#srchFrm {
    display: inline-block;
    position: relative;
    float: right;
}

input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border-style: solid;
    border-color: black;
    border-width: thin;
}

#srchFrm button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border-style: solid;
  border-color: black;
  border-width: thin;
  cursor: pointer;
}

#srchRslts {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
}

#srchRslts li a {
    display: block;
    position: absolute;
    width: 73.425%;
    height: auto;
    color: black;
    background-color: white;
    padding: 10px;
    margin-top: -1px;
    margin-left: 0.1874px;
    border: 0.25px solid #dbdbdb;
    font-size: 14px;
    text-decoration: none;
    z-index: 100;
}

#srchRslts li a:hover:not(.header) {
  background-color: #eee;
}

最佳答案

您可以在 #srchRslts li a 上删除 position: absolute，然后在 #srchRslts 上设置 height 和 overflow: auto。

见下面的代码:

.sideBtn {
  position: relative;
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  align-content: center;
  align-items: center;
  text-align: center;
  line-height: 30px;
  flex: 1;
}

.sideBtn a{
  height: 32px;
  color: #000000;
}

.sideBtn a:hover {
    background-color: #22B0FF;
    cursor: pointer;
}

/**Search bar 
Credit goes to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_searchbar3
**/
#srchFrm {
    display: inline-block;
    position: relative;
    float: right;
}

input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border-style: solid;
    border-color: black;
    border-width: thin;
}

#srchFrm button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border-style: solid;
  border-color: black;
  border-width: thin;
  cursor: pointer;
}

#srchRslts {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
  height: 200px;
  overflow: auto;
}

#srchRslts li a {
    display: block;
/*     position: absolute; */
    width: 73.425%;
    height: auto;
    color: black;
    background-color: white;
    padding: 10px;
    margin-top: -1px;
    margin-left: 0.1874px;
    border: 0.25px solid #dbdbdb;
    font-size: 14px;
    text-decoration: none;
    z-index: 100;
}

#srchRslts li a:hover:not(.header) {
  background-color: #eee;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div class="sideBtn">

                <a href="Lab_1.html">Home</a>
                <a href="Lb1Labs.html">Labs</a>
                <a href="Lb1Projects.html">Projects</a>
                <a href="https://qwfepfp.blogspot.com/2019/09/blog-intromy-bio-2.html">Blogger</a>
                <a href="http://techteach.us/index.html">Techteach.us</a>
                <a href="http://techteach.us/Web2020/">Parent Directory</a>

                <!--Basic Search Bar.-->
                <form id="srchFrm">
                    <input id="srchBar" type="text" placeholder="Search...">
                    <button type="submit"><i class="fa fa-search"></i></button>


                <ul id="srchRslts">
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">?</a></li>
                    <li><a href="#">!</a></li>
                </ul>

                </form>
            </div>
</body>
</html>

关于html - 如何垂直溢出 HTML ul list 过去的 form 和 div 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58965623/

文章推荐： node.js - Waterline:使用 AND 作为元素查询数组

文章推荐： python - scipy.sparse 中缺少 save_npz 方法

文章推荐： python - 从两列到一列的值差异

文章推荐： javascript - 如何在nodejs和ES6导入中使用jquery插件？

r - 如何创建像这样的多维度列表 DATA<-list(list(list(),list(),list()),list(list(),list(),list()),list(list() ，列表()，列表()))？
我想使用 R 预定义这样的列表 DATA<-list( list(list(),list(),list()), list(list(),list(),list()), list(list(),l
haskell - 如何 `List + List = List[List]]`
如何将一个列表添加到另一个列表，返回一个列表的列表？ foo :: [a] -> [a] -> [[a]] 例如，我想要的结果是: foo [1,2] [3,4] 将是 [[1,2], [3,4]]。
python - 从 "lists of lists"和 "list"创建两个单独的 "list of lists"
我还没有在这里找到类似问题的解决方案，所以我会寻求你的帮助。有 2 个列表，其中之一是列表列表: categories = ['APPLE', 'ORANGE', 'BANANA'] test_re
python - "Flatten"list 包含lists of lists to lists of lists
这个问题不同于Converting list of lists / nested lists to list of lists without nesting (这会产生一组非常具体的响应，但无法解决
java - 无法从 List 转换为 List>
原始列表转换为 List正好。为什么原始列表的列表不能转换为 List 的列表？ { // works List raw = null; List wild = raw; } {
java - 涉及类型参数时，List> 不能赋值给 List>
在下面的代码中，get()被调用并将其结果分配给类型为 List> 的变量. get()返回 List>并在类型参数为 T 的实例上调用设置为 ? ，所以它应该适合。 import java.util
java - 无法从 List 转换为 List>
原始列表转换为 List正好。为什么原始列表的列表不能转换为 List 的列表? { // works List raw = null; List wild = raw; } {
scala - 在不够多态的情况下，为什么实现 `List a -> List a -> List a` 的方法比 `List Char -> List Char -> List Char` 少
在insufficiently-polymorphic 作者说: def foo[A](fst: List[A], snd: List[A]): List[A] There are fewer way
kotlin - List > + List = List <任何>？
我有下面的代码有效。 class ListManipulate(val list: List, val blockCount: Int) { val result: MutableList>
java - 有没有一种好的方法可以将 List>> 转换为 List>> 而不需要 3 个嵌套循环？
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
Scala - 将列表列表转换为单个列表 : List[List[A]] to List[A]
在 scala (2.9) 中转换列表列表的最佳方法是什么？我有一个 list : List[List[A]] 我想转换成 List[A] 如何递归地实现这一点？或者还有其他更好的办法吗？最佳答案
list - 标准ML : Searching through a list of lists
我编写了这个函数来确定给定元素是否存储在元组列表的列表中，但目前它只搜索第一个列表。我将如何搜索其余列表？ fun findItem (name : command, ((x,y)::firstlis
Java List of List of List，更好的解决方案？
我创建了一个类名 objectA，它有 4 个变量:约会时间;字符串文本；变量 1，变量 2 我需要创建一个 ObjectA() 列表。然后首先按时间对它们进行分组，其次按 var1，然后按 var2
python : Removing a List from List of List?
我有一套说法 char={'J','A'} 和列表的列表 content = [[1,'J', 2], [2, 'K', 3], [2, 'A', 3], [3,'A', 9], [5, 'J', 9
java - 访问List>>> titles = new ArrayList>>>();
我有以下列表 List >>> titles = new ArrayList >>> ();我想访问它的元素，但我不知道该怎么做.. 该列表有 1 个元素，它又包含 3 个元素，这 3 个元素中的
scala - 如何将 List[List[Long]] 转换为 List[List[Int]]？
转换 List[List[Long]] 的最佳方法是什么？到 List[List[Int]]在斯卡拉？例如，给定以下类型列表 List[List[Long]] val l: List[List[Lo
Java:将 List> 转换为 List>
我有一个来自 Filereader (String) 的 List-List，如何将其转换为 List-List (Double):我必须返回一个包含 line-Array 的第一个 Values 的
c# - 将 List> 转换为 List>
我收集了List> 。我需要将其转换为List> 。这是我尝试过的， List> dataOne = GetDataOne(); var dataTwo = dataOne.Select(x => x
java - List> 和 List 是 java 中不兼容的类型
这个问题在这里已经有了答案: Cannot convert from List to List> (3 个答案) 关闭 7 年前。我没有得到这段代码以任何方式编译: List a = new Ar
java - List> 和 List 是 java 中不兼容的类型
这个问题在这里已经有了答案: Cannot convert from List to List> (3 个答案) 关闭 7 年前。我没有得到这段代码以任何方式编译: List a = new Ar

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何垂直溢出 HTML ul list 过去的 form 和 div 标签？