微信小程序中文字与左侧头像紧贴的代码
时间: 2024-09-27 08:14:57 浏览: 38
在微信小程序中,如果你想让文字与左侧的用户头像紧密对齐,通常可以使用CSS来控制样式。你可以创建一个包含`wx-avatar`(用于显示头像)和`text`(用于显示文字)的`view`组件,并调整其布局。下面是一个简单的示例:
```html
<view class="avatar-and-text">
<wx-avatar src="{{userInfo.avatarUrl}}" size="60" style="float: left; margin-right: 10rpx;"></wx-avatar>
<view>{{userInfo.nickName}}</view>
</view>
<style scoped>
.avatar-and-text {
display: flex;
align-items: center; /* 使得文字与头像顶部对齐 */
}
</style>
```
在这个例子中,`.avatar-and-text`容器使用了Flexbox布局,`align-items: center;`会让内部元素在垂直方向上居中对齐,这样文字就会紧靠在头像右侧。
阅读全文