使用css怎么使标签移动而不固定,百度好多都没有,求大佬指点,

言午琅 发布于 03/31 18:22
阅读 34
收藏 1

问题是怎么使导航这个标签向右移动而不固定死,

要的成果是这样的

这是我写的css

/* 图片2的外框 */
.big_view_two{
display:inline-block;
/* display: flex; */
width: 25%;
min-height: 86rpx;
line-height: 86rpx;
height: auto;
margin-top: 20rpx;
background: fuchsia;
}
/* 图片2 */
.print_two{
margin-left: 5rpx;
}
/* 文字2 */
.font_bicder_two{
display: inline-block;
width:57rpx;
height:30rpx;
font-size:28rpx;
margin:0 auto;
/* margin-left: 80rpx; */
vertical-align:top;
}
这是html
<block wx:if="{{status==5}}">
<view class="{{num==1?'big':num==2?'big_one_two':'big_border_three'}}">
 
<view class="{{num==1?'big_view_one':num==2?'big_view_two':'bicder_picture'}}">
<image style='width:{{w1}}rpx;height:{{w1}}rpx;'
class="{{num==1?'print_one':num==2?'print_two':'image_none'}}" src="/image/wxd_two.png" ></image>
<view class="{{num==1?'font_one':num==2?'font_bicder_two':'font_three'}}">导航
</view>
</view>
 
 
<view class="{{num==1?'big_view_one':num==2?'big_view_two':'bicder_picture'}}">
<image style='width:{{w1}}rpx;height:{{w1}}rpx;'
class="{{num==1?'print_one':num==2?'picture_ont_two':'image_none'}}" src="/image/wxd_two.png">
</image>
<view class="{{num==1?'font_one':num==2?'font_bicder_two':'font_three'}}">导航</view>
</view>
 
<view class="{{num==1?'big_view_one':num==2?'big_view_two':'bicder_picture'}}" >
<image style='width:{{w1}}rpx;height:{{w1}}rpx;'
class="{{num==1?'print_one':num==2?'picture_ont_two':'image_none'}}" src="/image/wxd_two.png" ></image>
<view class="{{num==1?'font_one':num==2?'font_bicder_two':'font_three'}}">导航</view>
</view>

我这里有好几个场景的样式已经完成不动HTML的样子,就剩num==2的这个靠右一点没好,要按下面图片里的样子  ,把图片放大到34px文字(导航两字)就自动下移居中图片放大,文字在图片下面居中,

下面是我放大的样子我要放大到140的时候才会下去且不会居中

而且我130的时候只有第一个文字下移了 ,我用的单位是rpx

真的没办法了, 求大佬指点css要怎么写  万分感谢

margin-left 这个不行内外边距的移动多不行会固定;
加载中
返回顶部
顶部