定位 UL LI select 框

Question

我需要你的帮助。我想要完成的是使用 CSS 将我的自定义 UL LI 元素设置为像真正的列表框一样的样式。我想让这 2 个元素相互合并，并防止 UL 将其下的其他 HTML 元素向下移动。以下是我面临的问题：

JSFiddle：https://jsfiddle.net/umvpa0a0/1/

这是所需结果的图片：

这里是有问题的 HTML 和 CSS：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#recent {
    width: 175px;
    border: 1px solid red;
    list-style-type: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: none;
}

.search_field {
    display: inline-block;
    border: 1px solid red;
    width: 175px;
    position: relative;
}

.search_field input {
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

#btn_arrow {
    border: none;
    width: 15px;
    position: absolute;
    top: 0;
    right: 0;
}
.test {
    width: 100%;
    background: blue;
    height: 20px;
}
</style>

</head>

<body>

<div class="search_field">
<input id="fileno" type="text">
<input type="button" value="&#9660;" id="btn_arrow">
</div>
<input type="button" id="search" value="search">
<ul id="recent"><li>3434</li></ul>
<div class="test"></div>

</body>

</html>

Answer 1

像这样？

.everything {
    position: relative;
}
#recent {
 width: 175px;
 border: 1px solid red;
    border-top: none;
 list-style-type: none;
 padding: 0;
 margin: 0;
 cursor: pointer;
    background: #FFF;
    position: absolute;
    top: 19px;
}
.search_field {
    display: inline-block;
    border: 1px solid red;
    border-bottom: none;
    width: 175px;
    position: relative;
}

.search_field input {
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

#btn_arrow {
    border: none;
    width: 15px;
    position: absolute;
    top: 0;
    right: 0;
}
.test {
 width: 100%;
 background: blue;
 height: 20px;
}

<div class="everything">
<div class="search_field">
<input id="fileno" type="text">
<input type="button" value="&#9660;" id="btn_arrow">
</div>
<input type="button" id="search" value="search">
<ul id="recent"><li>3434</li></ul>
<div class="test"></div>
</div>

只需将所有内容放入带有 position: relative 属性样式的新 div 中，将 position: absolute 和 top: $px 属性添加到 #recent 并设置它的背景（白色）。

定位 UL LI select 框

Positioning UL LI select box

html

css

html-lists