Absolute Positioned Span Shrinks

Question

私は入力の順序付けられていないリストを持っています。エラーがあれば、ラベルの左側にエラーを表示します。

それぞれLIは相対的に位置し、span.errorは絶対配置されています。 span.errorの正しい位置を特定の ポイントに設定すると、スパンが縮小します。

ここには2つのjyフィドルがあります。

位置の右端が0に設定されている最初のもの（これはエラーメッセージを表示する方法ですが、ラベルの右側に表示します）。

http://jsfiddle.net/meander365/vmXHV/1/

そして第二に、右に設定した位置（span.errorが縮小した場合）

http://jsfiddle.net/meander365/vmXHV/2/

任意のアイデアを持ちますか？

Answer 1

絶対配置要素デフォルトで崩壊、そしてあなたはそれのためにをシフトいかなるを定義しない限り、ブラウザの重力を克服しません、それは、上、右、下、または左プロパティの値を指定しています。

私は2つの例を見ました。あなたのスパンにの幅を指定していないので、それは縮小します。幅を指定すると、私の言いたいことがわかります。一般的に

、絶対位置決めのために、これらの状況を考慮してください。あなたは幅または高さを指定していないが、両方の方向にシフトする要素を指定している場合

1. 、要素が利用可能なスペースを埋めるために広がっています。たとえば、800pxの幅を持つ親divにposition: absolute; left: 40px; right: 30px;を指定すると、絶対配置された要素の幅は800px - 40px（左） - 30px（右）= 720pxになります。
2. 絶対配置された要素の幅または高さの値が指定されている場合は、の要素を伸ばしてもの要素は移動しません。それはシフトだけそれです。

3. 定義済みの幅または高さの値がある場合、集中化手法の1つに絶対配置があります。

   #centered 
   { 
       width: 50px; 
       height: 50px; 
       position: absolute; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       left: 0; 
       margin: auto; 
   }