Html 如何使绝对定位的输入收缩到合适的位置？

我有以下html：

<ul>

    <li><a href='#'>Item 1</a><input type='text' value='whatever' /></li>
    <li><a href='#'>Item 2</a></li>
    <li><a href='#'>Item 3</a></li>
    <li><a href='#'>Item 4</a></li>

</ul>

输入被绝对定位

输入的祖先li相对定位

输入的不透明度为0，是静态元素，但需要存在

在任何时候，列表中只有一个输入（带有文本类型）

我想使

输入

标记收缩以适合li。

---

如何做到这一点？

这可能有点老套，但您可以尝试以下方法：

input{
  position: absolute;
  left: 0;
  right: 0;
  top: 24px or whatever you need
}

---

每个边都将与父元素的匹配边相对。

ohhh我喜欢这个小玩意儿哈哈：）我以前从未尝试过使用两个单独的位置，但它很管用关于浏览器兼容性有什么想法吗？旧版本的IE可能会有问题。其他一切都应该是好的，我已经在一个相当重要的公司网站上使用了这个技巧，但还没有人来找我的头。