Html 定位ulli选择框
我需要你的帮助。我试图实现的是使用CSS将我的自定义ulli元素设计成一个真正的列表框。我想让这两个元素彼此合并，并防止UL向下移动它下面的其他HTML元素。以下是我面临的问题： JSFiddle： 以下是所需结果的图片： 以下是所讨论的HTML和CSS：Html 定位ulli选择框,html,css,html-lists,Html,Css,Html Lists,我需要你的帮助。我试图实现的是使用CSS将我的自定义ulli元素设计成一个真正的列表框。我想让这两个元素彼此合并，并防止UL向下移动它下面的其他HTML元素。以下是我面临的问题： JSFiddle： 以下是所需结果的图片： 以下是所讨论的HTML和CSS： <!DOCTYPE html> <html> <head> <style type="text/css"> #recent { width: 175px; border:
<!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="▼" id="btn_arrow">
</div>
<input type="button" id="search" value="search">
<ul id="recent"><li>3434</li></ul>
<div class="test"></div>
</body>
</html>