当前位置:Gxlcms > html代码 > 利用table实现页面实现移动端页面自适应表单_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:485人阅读

为了实现如图所示的效果:

设置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;  }

人气教程排行