关于右对齐在各种定位下的写法

Post by 张美工, 2009-11-5, Views:

问题:想要将元素和它的内容与其父元素或定位最近的祖先元素右对齐。
解决方案:此设计模式在每一个步骤上都与左对齐模式对称

    --·要将内容右对齐,则把text-align:right赋给包含的块状元素。

    --·要创建一个右对齐的设定尺寸的元素,可以使用width:+value来设定它的尺寸。
          可以使用marign-right:0将它右对齐,用margin-left:auto阻止它左对齐。
          对于一个绝对定位元素,也可以使用right:0来使元素右对齐,用left:auto来阻止它左对齐。

   --·要创建一个右对齐的拉伸的元素,
         可以使用width:automargin-left:0margin-right:0来拉伸它的宽度至容器的左右端。
         对于一个绝对定位元素,也可以使用left:0right:0来拉伸它至左右两侧。

   --· 要创建一个右对齐的包裹的元素,
          可以使用width:auto、left:automargin-left:auto来设定包裹宽度。
          可以使用right:0margin-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。 
 

Tags: 右对齐 定位 
分类:css+div | 评论:0 | 引用:0
上一篇:交通 理解 用户体验
下一篇:页面制作经验一

或许你还对下面的文章感兴趣

Comments

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

<#template:pagebar#>

最新文章

最新评论

Guest