css多个div并列解决顶部对齐的问题

5 篇文章 0 订阅

项目中遇到这个问题,。之前貌似没有注意到,一下子也没想到办法
在这里插入图片描述

这显然不行,解决方法:,两个div都设置为

display: inline-block; 

右边的div设置以下即可

 style="vertical-align: top;"

在这里插入图片描述

okay

如果你遇到多个并列的`<li>`元素,其中的`<span>`大小不一致,导致对应的`<input>`元素左侧无法对齐,可以尝试以下几种方法来解决这个问题: 1. **固定宽度**: 给每个`<input>`设置固定的宽度,使其不受`<span>`大小的影响,同时使用百分比或固定像素值,以适应不同长度的`<span>`。例如: ```css input { width: calc(100% - max-content); /* 减去最长span的宽度 */ /* 或者 */ width: 25%; /* 避免直接依赖span,设置每列输入框占总宽度的25%,留出间隙 */ } ``` 2. **动态调整输入框边缘**: 如果你想让输入框紧贴`<span>`右边,可以计算`<span>`的实际宽度,并以此为基础调整`<input>`的左边缘。这通常需要一些JavaScript配合,如jQuery: ```javascript $('.li-element').each(function() { var spanWidth = $(this).find('span').outerWidth(); $(this).find('input').css('left', 'calc(100% - ' + spanWidth + 'px)'); }); ``` 3. **使用Flexbox布局**: 利用Flexbox的特性,你可以使`<input>`自适应`<span>`,而不会受到其大小的影响: ```css li { display: flex; align-items: center; } input { flex: 1; /* 自动分配剩余空间 */ } ``` 4. **表格布局**: 如果所有`<li>`元素需要按行对齐,可以考虑转换成表格布局,使每个单元格宽度相等: ```html <div class="table"> <div class="cell"> <span>...</span> <input type="..."> </div> <!-- 更多li... --> </div> <style> .table { display: table; } .cell { display: table-cell; } ``` 根据实际情况和兼容性需求选择最适合的方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kirinlau

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值