<view class='data_box'>
<view class='content_view' >
<view class='text_box'>
<view class='bottom_img_box'></view>
<view class='text'>账单统计</view>
<view class='second_text'>查看订单对应账单</view>
<view class='arrow'></view>
</view>
</view>
<view class='content_view'>
<view class='text_box'>
<view class='bottom_img_box'></view>
<view class='text'>资料认证</view>
<view class='second_text'>已认证</view>
<!-- <view class='second_text'>未认证</view> -->
<view class='arrow'></view>
</view>
</view>
<view class='content_view'>
<view class='text_box'>
<view class='bottom_img_box'></view>
<view class='text'>违章查询</view>
<view class='second_text'>查询车辆违章信息</view>
<view class='arrow'></view>
</view>
</view>
<view class='content_view'>
<view class='text_box'>
<view class='bottom_img_box'></view>
<view class='text'>联系客服</view>
<view class='second_text'>
<text space='nbsp'>400 100 8888</text>
</view>
<view class='arrow'></view>
</view>
</view>
</view>
.data_box {
width: 100%;
height: 400rpx;
margin-top: 21rpx;
box-shadow: 0 3rpx 18rpx 0 rgba(0, 0, 0, 0.1);
border-radius: 3rpx;
background-color: #fff;
}
.content_view{
width: 659rpx;
height: 99rpx;
margin-left: 31rpx;
/* border: 1rpx solid white; */
}
.text_box{
display:flex;
width: 100%;
height: 36rpx;
text-align: center;
margin: 30rpx 0 0 0;
margin-top: 30rpx;
}
.bottom_img_box{
width: 32rpx;
height: 100%;
}
.text{
width: 120rpx;
line-height: 36rpx;
font-size: 30rpx;
text-align: center;
margin-left: 16rpx;
color: #333;
}
.second_text{
width: 214rpx;
line-height: 36rpx;
font-size: 24rpx;
color: #999;
text-align: right;
margin-left: 198rpx;
}
.arrow{
width: 18rpx
height: 30rpx;
margin: 3rpx 0 0 28rpx;
border: 1rpx solid red
}
为什么 把上面 css 中的 content_view 中的 boder 属性打开之后才会正常,注释之后就如图了,打开就正常了
你.text_box的上外边距和其父元素.content_view的上外边距折叠了,border会把它们的上外边距分开,你要去掉border的话,改用overflow: hidden也能起到同样的效果。