Question

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

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

以下是所需结果的图片：

这是HTML＆amp;有问题的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选择框

1 个答案: