絶対配置された入力を収縮させる方法を教えてください。

Question

私は、次のような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> 

1. 入力がabsolutly配置されているが。
2. 入力の祖先liが相対的に配置されています。
3. 入力には不透明度0があり、静的な要素ですが、そこに存在する必要があります。
4. リストにはいつでも1つの入力（タイプテキスト付き）しかありません。

inputタグをliに合わせて縮小します。 これはどのように行うことができますか？

Answer 1

は、それはおそらく、少しハックですが、あなたはこれを試みることができる：

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

各エッジには、親要素のマッチングエッジに対してとなります。