关于div下span不对齐的解决问题

问题:

        在设计前端界面时,碰到在同一div下添加多个水平排列的div(或其他标签)和span时,存在高度不一致的问题。


        

<template>
	<Layout>
		<!-- header -->
		<Header>
			<div style="height: 64px;float: left;padding-left: 64px;">
				<img style="height: 64px;width: 64px;" src="../assets/logo.png"/>
				<span style="height: 64px;line-height: 64px;font-size: 3em;font-family: PingFang SC;color: white;margin-left: 64px;
					display: inline;">span标签</span>
			</div>
		</Header>
	</Layout>
</template>

        代码如上所示,div父标签下有img标签和span标签,明显可以看出错位,也即是高度不一致。并且display标签依然生效。


解决:

        给span标签添加 vertical-align:top; 

<template>
	<Layout>
		<!-- header -->
		<Header>
			<div style="height: 64px;float: left;padding-left: 64px;">
				<img style="height: 64px;width: 64px;" src="../assets/logo.png"/>
				<span style="height: 64px;line-height: 64px;font-size: 3em;font-family: PingFang SC;color: white;margin-left: 64px;
					display: inline;vertical-align:top;">span标签</span>
			</div><!--  -->
		</Header>
	</Layout>
</template>

        刷新界面,实现效果


原理:

        翻阅w3school关于vertical-align的介绍,查看关于vertical-align的属性值,top是为将span元素与行中最高的元素平齐。



  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值