html搜索相同,html - 如何将结果div放置在搜索输入下方且输入宽度相同？ - 堆栈内存溢出...

我有一个搜索框，在输入时会显示一些结果。

这是一个静态示例：

• first
• second
• third

CSS：

.my-form{width:100%}

.search-wrapper{

width: 50%;

margin: 0 auto;

background: #000;

display: table;

position:relative;

padding:2%

}

span{display:table-cell;margin-top:10%}

span:first-of-type{width:75%}

.search-query{

border-top-left-radius: 25px;

border-bottom-left-radius: 25px;

padding-left: 3%;

width:100%

}

.search{

background: #ea7d20;

border-radius: 25px;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

width:100%

}

.results{

width:75%;

background:#888;

color:#fff;

position:absolute;

left:0;

top:100%

}

我想将results div放置在搜索输入下方，并具有与输入相同的宽度，它也应该响应。