抗击新冠肺炎期间开发了一个进入医院院区登记页面,用于进入院区人员自助录入基本信息,到达院区后快速扫码完成登记。其中的流行病学调查用到了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>

,