关于多个行内元素底端不对齐的问题

博客提出多个不同标签行内块元素设置margin后底端不对齐的问题,给出通过CSS样式设置vertical-align属性的解决方案,如设置为bottom,还提及更多对齐方式可参考表格。

问题:如下图,多个不同标签的行内块元素,尽管设置了margin,但底端还是不对齐。

解决方案之一: 

通过css样式设置vertical-align 属性。

如:vertical-align:bottom;

更多对齐方式参考下表。

baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length 
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。
CSS行内元素靠右侧对齐可以通过多种方法实现: ### 使用 `text-align: right` 如果行内元素包含在一个块级元素中,可以对该块级元素设置 `text-align: right` 属性。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { text-align: right; } </style> </head> <body> <div class="container"> <a href="#">链接1</a> <a href="#">链接2</a> </div> </body> </html> ``` 在上述代码中,`div` 是一个块级元素,通过设置 `text-align: right`,其内部的行内元素(这里是 `a` 标签)会靠右对齐。 ### 使用 `float: right` 可以直接对行内元素设置 `float: right` 属性,使其浮动到右侧。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> a { float: right; } </style> </head> <body> <a href="#">链接1</a> <a href="#">链接2</a> </body> </html> ``` 需要注意的是,使用 `float` 可能会影响布局,父元素可能会出现高度塌陷的问题,需要进行清除浮动处理。 ### 使用 `flexbox` 使用 `display: flex` 和 `justify-content: flex-end` 可以实现行内元素靠右对齐。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .flex-container { display: flex; justify-content: flex-end; } </style> </head> <body> <div class="flex-container"> <a href="#">链接1</a> <a href="#">链接2</a> </div> </body> </html> ``` `flexbox` 是一种现代的布局模型,提供了强大的布局能力。 ### 使用 `grid` 使用 `display: grid` 和 `place-items: end` 也能实现行内元素靠右对齐。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grid-container { display: grid; place-items: end; } </style> </head> <body> <div class="grid-container"> <a href="#">链接1</a> <a href="#">链接2</a> </div> </body> </html> ``` `grid` 布局提供了二维的布局能力,适用于复杂的布局场景。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值