我需要你的帮助。我想要完成的是使用 CSS 将我的自定义 UL LI 元素设置为像真正的列表框一样的样式。我想让这两个元素相互合并，并防止 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="▼" id="btn_arrow">
</div>
<input type="button" id="search" value="search">
<ul id="recent"><li>3434</li></ul>
<div class="test"></div>
</body>
</html>
最佳答案
像这样？
.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="▼" 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 并为其设置背景(白色)。
关于html - 定位 UL LI 选择框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33987882/