css - 绝对定位跨度收缩

Question

我有一个无序列表的输入，如果有错误我希望错误显示在标签的左边。

每个 LI 都是相对定位的，而 span.error 是绝对定位的。当我将 span.error 的正确位置设置为过去某个时间点跨度缩小。

这里有两个 js fiddle 。

第一个位置 right 设置为 0(这是我希望错误消息显示的方式，但在标签的右侧)。

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

第二个，设置了正确的位置(span.error 缩小了)

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

有什么想法吗？

Answer 1

绝对定位的元素默认折叠，不会克服浏览器的重力，除非你为它定义任何shifting，即指定top、right、bottom 或 left 属性的值。

我看到了两个例子。由于您没有为跨度指定任何宽度，它会缩小。指定一个宽度，你就会明白我的意思了。

一般来说，考虑绝对定位的这些情况:

1. 如果您没有指定宽度或高度，但指定了元素在两个方向上的移动，元素会拉伸(stretch)以填充可用空间。例如，当您指定 position: absolute;左:40px； right: 30px; 在宽度为 800px 的父 div 中，绝对定位元素的宽度变为 800px - 40px(左)- 30px(右)= 720px。
2. 如果为绝对定位的元素指定了宽度或高度值，元素移动 不会拉伸(stretch)元素。它只会改变它。

3. 如果您有预定义的宽度或高度值，其中一种集中技术是绝对定位。

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