转:关于右对齐在各种定位下的写法
2012-04-10 17:13 @影子@ 阅读(463) 评论(0) 编辑 收藏 举报http://www.zhangmeigong.cn/post/about.html
问题:想要将元素和它的内容与其父元素或定位最近的祖先元素右对齐。解决方案:此设计模式在每一个步骤上都与左对齐模式对称。 --·要将内容右对齐,则把text-align:right赋给包含的块状元素。
--·要创建一个右对齐的设定尺寸的元素,可以使用width:+value来设定它的尺寸。 可以使用marign-right:0将它右对齐,用margin-left:auto阻止它左对齐。 对于一个绝对定位元素,也可以使用right:0来使元素右对齐,用left:auto来阻止它左对齐。
--·要创建一个右对齐的拉伸的元素, 可以使用width:auto、margin-left:0和margin-right:0来拉伸它的宽度至容器的左右端。 对于一个绝对定位元素,也可以使用left:0和right:0来拉伸它至左右两侧。
--· 要创建一个右对齐的包裹的元素, 可以使用width:auto、left:auto和margin-left:auto来设定包裹宽度。 可以使用right:0和margin-right:0将它右对齐。
模式: 对设定尺寸的静态块状元素右对齐 block-selector { position:static; text-align:right; width:+value; margin-left:auto; margin-right:0; } 对拉伸的静态块状元素右对齐 block-selector { position:static; text-align:right; width:auto; margin-left:0; margin-right:0; } 对设定尺寸的绝对定位元素右对齐 selector { position:abslute; text-align:right; width:+value; left:0; margin-left:auto; right:0; margin-right:0; } 对包裹的绝对定位元素右对齐 selector { position:absolute; text-align:right; width:auto; left:auto; margin-left:auto; right:0; margin-right:0; } 对拉伸的绝对定位元素右对齐 selector { position:absolute; text-align:right; width:auto; left:0; margin-left:0; right:0; margin-right:0; } 适用范围:此模式适用于所有元素。 局限:被拉伸的绝对定位模式不适用于IE6,但适用于IE7。