Html 如何将results div定位在与输入宽度相同的搜索输入下面？

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

下面是一个静态示例：

<form method="GET" class="my-form">
    <div class="search-wrapper">
        <span>
            <input  type="search" class="search-query" placeholder="Search">       </span>
        <span>
            <input type="submit" value="search" class="search" >
        </span>
        <div class="results">
            <ul>
                <li>first</li>
                <li>second</li>
                <li>third</li>
            </ul>
        </div>
    </div>
</form>

我想将

results

div定位在搜索输入下面，并与该输入具有相同的宽度，它也应该是响应的

---

这里是一个实时预览：

您的

结果

在

搜索包装中。但该div受2%填充的影响。这就是为什么你的价值观没有像你期望的那样做出反应

.results{  
  width: 70%;
  background: #888;
  color: #fff;
  position: absolute;
  left: 3.5%;
  top: 100%;
  }

要验证对齐，可以将最大值设置为71%

希望这有帮助：）


.my form{width:100%}
.搜索包装器{
宽度：50%；
保证金：0自动；
背景：#000；
显示：表格；
位置：相对位置；
填充：2%
}
span{显示：表格单元格；页边距顶端：10%}
span:类型{width:75%}的第一个
.搜索查询{
边框左上半径：25px；
边框左下半径：25px；
左：3%；
宽度：100%
}
.搜索{
背景#ea7d20；
边界半径：25px；
边框左上半径：0；
边框左下半径：0；
宽度：100%
}
.结果{
宽度：70%；
背景：#888；
颜色：#fff；
位置：绝对位置；
左：3.5%；
最高：100%；
}


首先
第二
第三

更新了小提琴，只需将结果类宽度保持在100%

.results{
  margin-left: 4%;
  width:70%;
}

我指的是搜索输入
，而不是整个
搜索包装
，因此您希望结果div作为搜索栏宽度？我指的是搜索输入
，而不是整个
搜索包装
.results{
  margin-left: 4%;
  width:70%;
}