`

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

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

    --·要将内容右对齐,则把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。
分享到:
评论

相关推荐

    css日常公用样式与BUG解决方案

    - `text-align`: 控制文本对齐方式,如左对齐、右对齐、居中等。 - `line-height`: 调整行高,影响文本的可读性。 5. **颜色和背景** - `background-color`: 设置元素背景颜色。 - `background-image` 和 `...

    css3看前端

    - `text-align`:控制文本对齐方式,如左对齐、居中、右对齐。 4. 边框属性: - `border-width`:定义边框宽度。 - `border-style`:设置边框样式,如实线、虚线等。 - `border-color`:指定边框颜色。 - `...

    命名规范1.2.docx

    - `.tr`:设置文本右对齐。 - **背景颜色**: - `.bgc-fff`:设置背景颜色为白色(#fff)。 #### 独立命名示例 - **文字颜色**: - `.fc-red`:设置文字颜色为红色(#f00)。 ### 结论 遵循以上所述的前端...

    CSS初级学习手册.pdf

    - 文本对齐:设置文本水平对齐方式,如左对齐、右对齐等。 - 文本装饰:添加下划线、删除线、上划线等。 - 文本缩进:设置段落首行缩进。 - 行间距:设置文本行高。 4. CSS引入方式 CSS的引入方式主要有三种:内部...

    background-position 的学习.zip

    这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`background-position`的工作原理、语法以及常见用法。 `background-position`属性的基本语法是: ```css ...

    Js常见面试题.pdf

    `,这代表上、右、下、左的顺序。 5. CSS的实际宽度计算: 当给一个`div`设置样式`width:200px; padding:0 20px; border:5px;`时,其实际宽度是`200px + 20px*2 + 5px*2 = 250px`。 6. 居中对齐CSS样式: 使用`...

    详解css3 flex弹性盒自动铺满写法

    在flex布局中,还可以使用align-items和justify-content属性来分别控制子项的垂直和水平对齐。这些属性使得开发者能够更细致地控制布局表现,特别是在不同方向上。 总结以上内容,CSS3 flex弹性盒布局的自动铺满...

    css 跨浏览器实现float-center.docx

    如`javascript css styleFloat`、`javascript css float 属性的特别写法`、`CSS 中Float(浮动)相关技巧`、`javascript 下操作 css 的float 属性的特别写法`、`css position: absolute、relative详解`、`CSS 定位中...

    网页设计与制作(divcss)测试题.pdf

    6. **段落对齐**:没有“上下对齐”这种对齐方式,常见的有左对齐、居中对齐和右对齐。 7. **CSS样式类型**:包括内样式、内嵌式、链接式和导入式。 8. **ID选择符**:ID选择符前需加`#`符号。 9. **自定义CSS样式**...

    HTML+CSS知识(4)

    - **Sticky**: 在其容器内滚动时,会从文档流中“粘贴”到某个位置,直到到达特定位置后再变为固定定位。 #### 其他样式属性 - **Box-shadow**: 用于为元素添加阴影效果,通常用于创建更丰富的视觉层次感。 - **...

    div+css布局时的浏览器兼容问题

    然而,在实际应用过程中,由于不同浏览器(如IE、Firefox、Chrome等)对CSS的支持程度存在差异,导致同一份CSS代码在不同浏览器下的表现可能会有所不同。这种现象被称为“浏览器兼容性问题”。解决这些问题对于保证...

    全国计算机一级考试选择题题库含答案.pdf

    在Excel中,给当前单元格输入数值型数据时,默认为右对齐。这种设置有助于提高数据的可读性,特别是在进行数据比较时。 #### 16. 移动工作表的位置 **知识点解析:** 在Excel中,如果想要在同一工作簿中把工作表...

    DIV_CSS测试题

    6. **对齐方式**:在CSS中,没有“上下对齐”这个概念,常见的对齐方式有居中、靠左、靠右和两端对齐。 7. **CSS样式类型**:包括内样式(内联样式)、内嵌式、链接式和导入式。 8. **ID选择符**:ID选择符前应加`#`...

    CSS全科教程(Word文档)

    - **单边内边距**:可以分别设置上、右、下、左边距。 **2.3 CSS边框** - **边框属性**:`border`属性定义边框的样式、宽度和颜色。 - **边框样式**:如实线、虚线等。 - **边框颜色**:使用颜色值设置边框颜色。 ...

    小学数学1-6年级所有重点知识点汇总.doc

    - 没有括号时,从左至右依次进行加减乘除。 - 有括号时,先算括号内的运算,再处理括号外的。 3. **四位数的读法与写法**: - 四位数读法:从高位读起,中间连续的零只读一个,末尾的零不读。 - 四位数写法:从...

    办公自动化之word2007教程.pptx

    例如设置文件默认保存位置、定时自动保存文档、自定义快速访问工具栏的命令,甚至启用“即点即输”功能,使得在文档任意位置双击即可开始输入(仅在页面视图和Web视图下有效)。 【文档操作】 在Word2007中,常见的...

    HTML5考试试卷.pdf

    6. CSS的盒子模型包括`margin`(外边距)、`border`(边框)和`padding`(内边距),但不包含`align`(对齐)。第9题中,D是正确答案。 7. `font-weight`属性用于设置文本的粗细,第10题中,要将文本定义为粗体,...

    DreamweaverCS6网页设计与应用(马立丽第5版)(微课版)-测试题-及答案-第12章.docx

    4. `<p align="right">`:此标签表示段落文本的水平对齐方式为右对齐。 5. 有序列表标签:有序列表使用`<ol>`标签创建,其中`<li>`标签用于定义列表项。 6. 定义列表标签:定义列表使用`<dl>`标签,`<dt>`用于定义...

    笔算乘法不进位pptPPT教案.pptx

    在这个环节中,学生被引导去观察并对比不同的乘法竖式,理解为什么乘法的计算要从个位开始,以及数字在竖式中的定位原因。例如,学生需理解为什么在计算2×3时,结果“6”要写在百位上,这象征着乘数的位置和乘法...

    CSS使用技巧的word文档

    1. 文字水平居中:通过设置`text-align`属性为`center`,可以实现一段文字在容器内的水平居中对齐。 ```css text-align: center; ``` 2. 容器水平居中:为容器设定明确的宽度,并将`margin`的左右值设为`auto`,...

Global site tag (gtag.js) - Google Analytics