絕對定位跨度收縮 (Absolute Positioned Span Shrinks)

問題描述

絕對定位跨度收縮 (Absolute Positioned Span Shrinks)

I have an unordered list of inputs and if there is an error I want the error to show to the left of the label.

Each LI is positioned relatively and the span.error is positionined absolutely. When I set the right position of the span.error past a certain point the span shrinks.

Here are two js fiddle's.

The first with the position right set to 0 (this is how I want the error message to display, but to the right of the label).

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

And the second, with the position right set (where the span.error has shrunk)

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

Any ideas?

‑‑‑‑‑

參考解法

方法 1:

Absolutely positioned elements collapse by default, and won't overcome browser's gravity unless you define any shifting for it, that is, specify value for top, right, bottom, or left properties.

I saw two examples. Since you haven't specified any width for your span, it shrinks. Specify a width and you see what I mean. 

In general, consider these situations for absolute positioning:

1. If you haven't specified width or height, but has specified element shifting on both directions, element stretches to fill the available space. For example, when you specify position: absolute; left: 40px; right: 30px; in a parent div which has 800px width, your absolutely positioned element's width becomes 800px ‑ 40px (left) ‑ 30px (right) = 720px.
2. In case of a specified width or height value for the absolutely positioned element, element shifting doesn't stretch the element. It only shifts it.

3. One of the centralization techniques is absolute positioning, if you have a predefined width or height value. 

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

(by jigglyT101、Saeed Neamati)

參考文件

1. Absolute Positioned Span Shrinks (CC BY‑SA 3.0/4.0)