一. 发现问题
bug: 当用户发送内容过短时，操作按钮显示不全
操作按钮是定位在消息的下方,点击消息展示操作按钮，下面是简单代码示例。
.content {
position: relative;
background-color: #0369FF;
height: 26px;
border-radius: 8px 8px 0px 8px;
color: #ffffff;
padding: 5px 10px;
margin: 20px 5px;
}
.menu {
color: #333333;
display: inline-flex;
position: absolute;
bottom: -30px;
left: 0;
}
- 看图
- 为了更直观体现，把点击消息显示操作菜单按钮的判断去掉
二. 解决方法
- 在
left:0;的基础上增加right:0;
一个元素设置了 position: absolute 并且同时设置了 left: 0 和 right: 0，它会覆盖整个父元素的水平范围，在水平方向上将会铺满整个父元素的宽度。也就是说，因为menu盒子是flex布局，占满了一行。但是，内容被挤压了。如果使用flex-shrink: 0;.那么还是会像上面那样内容向右撑开。
-
用户消息的操作菜单靠右对齐，可以是可以，但是不符合设计需求，pass。
-
完美解决方案, 靠左对齐显示，空间不够时向左撑开
position: absolute;
left: 0;
right: 0;
margin-left: auto;
min-width: fit-content;
三. 插件下载地址
uniapp官方插件市场： ext.dcloud.net.cn/plugin?id=1…
四. 围观
微信搜索小程序： zerojs零技术
或扫码
