checkbox设置只能选一个,CheckBox标签自动换行

抗击新冠肺炎期间开发了一个进入医院院区登记页面,用于进入院区人员自助录入基本信息,到达院区后快速扫码完成登记。其中的流行病学调查用到了CheckBox标签,由于调查内容过长,CheckBox标签又没有自动换行的属性,所以显示出来特别不美观。后来用了一种折中的办法,用Span标签包裹CheckBox标签和调查内容(文字),Span标签增加加样式 display:inline-block。很好的解决了CheckBox不能自动换行问题。

效果如图:

checkbox设置只能选一个,CheckBox标签自动换行(1)

CheckBox自动换行

代码如下:

<span style="display:inline-block"> <input type="checkbox" name="register.iszz" value="1" lay-skin="primary">是否有发热、咽痛,咳嗽,腹泻、鼻塞、流鼻涕、乏力等症状? </span> <span style="display:inline-block"> <input type="checkbox" name="register.iswh" value="1" lay-skin="primary">14天内是否有武汉及周边地区或者国内其他有病例报告地区的旅行史或居住史? </span> <span style="display:inline-block"> <input type="checkbox" name="register.isbd" value="1" lay-skin="primary">14天内是否有境外疫情严重国家或地区的旅行或居住史? </span> <span style="display:inline-block"> <input type="checkbox" name="register.isjcxg" value="1" lay-skin="primary">14天内是否接触过新冠病毒感染确诊病例? </span> <span style="display:inline-block"> <input type="checkbox" name="register.isjcwh" value="1" lay-skin="primary">14天内是否曾接触过武汉及周边地区或者国内其他有病例报告地区的发热、乏力、咳嗽、咽痛有呼吸道症状的患者? </span> <span style="display:inline-block"> <input type="checkbox" name="register.isjcbd" value="1" lay-skin="primary">14天内是否接触过境外疫情严重国家或地区的发热、乏力、咳嗽、咽痛有呼吸道症状的患者? </span> <span style="display:inline-block"> <input type="checkbox" name="register.isjjfb" value="1" lay-skin="primary">您周围(如家中、学校班级或单位)是否有2例及以上发热和/或呼吸道症状的病例? </span>

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页