当前位置: 首页>>代码示例>>用法及示例精选>>正文


CSS right属性用法及代码示例

css的right属性主要影响元素的水平位置,而css的属性对未定位的元素没有影响。
用法:

right:auto|length|initial|inherit;

属性值:

  • auto:这是默认属性,浏览器将在其中计算右边位置。
    用法:
    right:auto;

    示例1:

    <!Doctype html> 
    <html> 
      
    <head> 
        <title> 
            CSS | right Property 
        </title> 
        <style> 
            div.geek { 
                position:relative; 
                width:300px; 
                height:200px; 
                border:3px solid green; 
            } 
              
            div.geeks { 
                position:absolute; 
                <!-- "auto" right property--> 
                right:auto; 
                width:100px; 
                height:120px; 
                border:3px solid green; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <h1>CSS right Property</h1> 
      
        <div class="geek"> 
          Geek For Geeks(here position of element is relative) 
        <div class="geeks"> 
          Geek For Geeks 
         (here position of element is absolute and element) 
        </div></div> 
      
    </body> 
      
    </html>

    输出:

  • length:长度帮助以px,cm为单位设置元素的右边位置。它应该始终具有正值。

    用法:



    right:length;

    示例-2:

    <!Doctype html> 
    <html> 
      
    <head> 
        <title> 
            CSS | right Property 
        </title> 
        <style> 
            div.geek { 
                position:relative; 
                width:300px; 
                height:200px; 
                border:3px solid green; 
            } 
              
            div.geeks { 
                position:absolute; 
                <!-- "length" right property> 
                right:0px; 
                width:100px; 
                height:120px; 
                border:3px solid green; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <h1>CSS right Property</h1> 
      
        <div class="geek"> 
          Geek For Geeks(here position of element is relative) 
          <div class="geeks"> 
            Geek For Geeks 
            (here position of element is absolute and element) 
          </div> 
         </div> 
      
    </body> 
      
    </html>

    输出:

  • initial:Initial关键字用于设置CSS属性的默认值。

    用法:

    right:initial;

    示例3:

    <!Doctype html> 
    <html> 
      
    <head> 
        <title> 
            CSS | right Property 
        </title> 
        <style> 
            div.geek { 
                position:relative; 
                width:300px; 
                height:200px; 
                border:3px solid green; 
            } 
              
            div.geeks { 
                position:absolute; 
                <!--"initial" right property--> 
                right:initial; 
                width:100px; 
                height:120px; 
                border:3px solid green; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <h1>CSS right Property</h1> 
      
        <div class="geek"> 
          Geek For Geeks(here position of element is relative) 
          <div class="geeks"> 
            Geek For Geeks 
            (here position of element is absolute and element) 
         </div> 
      </div> 
      
    </body> 
      
    </html>

    输出:

  • inherit:Inherit关键字也用于设置CSS属性的默认值。此处的默认值是上一个元素的设置值。
    用法:
    right:inherit;

    示例4:

    <!Doctype html> 
    <html> 
      
    <head> 
        <title> 
            CSS | right Property 
        </title> 
        <style> 
            div.geek { 
                position:relative; 
                width:300px; 
                height:200px; 
                border:3px solid green; 
            } 
              
            div.geeks { 
                position:absolute; 
                <!--"inherit" right property> 
                right:inherit; 
                width:100px; 
                height:120px; 
                border:3px solid green; 
            } 
        </style> 
    </head> 
      
    <body> 
      
        <h1>CSS right Property</h1> 
      
        <div class="geek"> 
          Geek For Geeks(here position of element is relative) 
          <div class="geeks"> 
            Geek For Geeks 
            (here position of element is absolute and element) 
        </div> 
      </div> 
      
    </body> 
      
    </html>

    输出:

    支持的浏览器:下面按属性列出了支持的浏览器:

    • 谷歌浏览器1.0
    • 边5.5
    • Firefox 1.0
    • Opera 5.0
    • Safari 1.0

相关用法

注:本文由纯净天空筛选整理自khajuriameenal1999大神的英文原创作品 CSS | right Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。