欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

利用table实现页面实现移动端页面自适应表单_html/css_WEB-ITnose

程序员文章站 2022-04-23 18:05:54
...
为了实现如图所示的效果:

设置table的宽度为百分比的值,让其宽度随页面的宽度而改变。input占据整个td的宽度。
主要html代码如下:

是否开具发票

主要的scss样式如下:

.form{  width: 96%;  margin: 0.3rem auto;  font-size: 0.7rem;  td{    height: 2.5rem;  }  input{    font-family: "Microsoft Yahei";    outline: none;    color: #d8d8d8;  }  input[type=text],input[type=phone],input[type=email]{    border: 1px solid #e10000;    height: 1.55rem;    line-height: 1.55rem;    padding-left: 0.4rem;    width: 100%;    box-sizing: border-box;    background: transparent;  }