我妈已经三天没打我了 2024-01-24 16:15 采纳率: 86%
浏览 2
已结题

修改css样式,使得图标和文字成两列

要写成图1这样的,但是实际上选框是图二这样的,该怎么调整呢

图一

img

图二

img


<div class="fdsyrcheckcrs">
    <span @click=crsRadio('1')>
        <span id="is_crs_renewal" :class="iscrs === '1' ? 'option_icon_true' : 'option_icon_false'"></span>
        <span>全部是仅为中国税收居民</span>
    </span>
</div>
<div class="fdsyrcheckcrs">
    <span @click=crsRadio('2')>
        <span id="is_crs_renewal" :class="iscrs === '2' ? 'option_icon_true' : 'option_icon_false'"></span>
        <span>部分是非居民或既是中国税收居民又是其他国家(地区)税收居民</span>
    </span>
</div>
<div class="fdsyrcheckcrs">
    <span @click=crsRadio('3')>
        <span id="is_crs_renewal" :class="iscrs === '3' ? 'option_icon_true' : 'option_icon_false'"></span>
        <span>全部是非居民或既是中国税收居民又是其他国家(地区)税收居民</span>
    </span>
</div>
<div class="fdsyrcheckcrs">
    <span @click=istabcrs('crsRadio4')>
        <span id="crsRadio4" class="faoption_icon_false"></span>
        <span class="option_title">本人确认上述信息的真实、准确和完整,且当这些信息发生变更时,将在30日内通知贵机构,否则本人承担由此造成的不利后果</span>
    </span>
</div>


crsRadio:function(value){
         this.iscrs = value;
},

.fdsyrzdcrs{
    background: #fff;
    line-height:1rem;
    padding:0.4rem 0;
    box-sizing: border-box;
}
.fdsyrcheckcrs{
    margin-top: 0.5rem;
    margin-left: 0.4rem;
    width: 95%;
    height: 100%;
    display: flex;
    position: Static;
    padding-bottom: 0.5rem;
    border-width:0.1px;
}
.option_icon_true {
    display: inline-block;
    width: 0.84rem;
    height: 0.84rem;
    background: url(../images/icon_check.png) no-repeat 0 100%;
    background-size:cover;
    vertical-align: text-top;
}

.option_icon_false {
    display: inline-block;
    width: 0.84rem;
    height: 0.84rem;
    /*margin-right: 0.2rem;*/
    background: url(../images/icon_check.png) no-repeat;
    background-size: cover;
    vertical-align: text-top;
}
.faoption_icon_false {
  display: inline-block;
  top: 50%;
  left: -1rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  background: url(../images/icon_checked.png) no-repeat;
  background-size: 100% 100%;
}
.faoption_icon_false {
    background: url(../images/icon_unchecked.png) no-repeat;
  background-size: 100% 100%;
}
  • 写回答

1条回答 默认 最新

  • 一笔浓墨画佳人 2024-01-24 16:30
    关注

    最外面span宽度给百分百,里面两个span宽度

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 1月24日
  • 修改了问题 1月24日
  • 修改了问题 1月24日
  • 创建了问题 1月24日

悬赏问题

  • ¥15 问题遇到的现象和发生背景 360导航页面千次ip是20元,但是我们是刷量的 超过100ip就不算量了,假量超过100就不算了 这是什么逻辑呢 有没有人能懂的 1000元红包感谢费
  • ¥30 计算机硬件实验报告寻代
  • ¥15 51单片机写代码,要求是图片上的要求,请大家积极参与,设计一个时钟,时间从12:00开始计时,液晶屏第一行显示time,第二行显示时间
  • ¥15 用C语言判断命题逻辑关系
  • ¥15 原子操作+O3编译,程序挂住
  • ¥15 使用STM32F103C6微控制器设计两个从0到F计数的一位数计数器(数字),同时,有一个控制按钮,可以选择哪个计数器工作:需要两个七段显示器和一个按钮。
  • ¥15 在yolo1到yolo11网络模型中,具体有哪些模型可以用作图像分类?
  • ¥15 AD9910输出波形向上偏移,波谷不为0V
  • ¥15 淘宝自动下单XPath自动点击插件无法点击特定<span>元素,如何解决?
  • ¥15 曙光1620-g30服务器安装硬盘后 看不到硬盘