Question

以下是表单HTML：

<form method="post" action="/cgi-bin/Contact.pl"  id="contact-form">
  <div id="wrapping" class="clearfix">  
    <section id="aligned">  
      <input type="text" name="name" id="name" placeholder="Name..." autocomplete="off" tabindex="1" class="txtinput" data-validate="validate(required)">  
      <input type="email" name="email" id="email" placeholder="Email..." autocomplete="off" tabindex="2" class="txtinput" data-validate="validate(required, email)">  
     <textarea name="message" type="text" id="message" placeholder="Message..." tabindex="3" class="txtblock" data-validate="validate(minlength(20))"></textarea> 

   <div id="buttons">
      <input type="reset" name="reset" class="button" tabindex="4" value="Clear">
      <input type="submit" name="submit" class="button" tabindex="5" value="Send">
   <br style="clear:both;">
   </div>
</section>

这是相应的css：

#contact-form { 
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */    
    box-sizing: border-box; 
    }
#contact-form .txtinput { 
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #DEDEDE;
    margin-bottom: 20px;
    font-size: 1em;
    padding: 11px 25px;
    padding-left: 55px;
    width: 90%;
    color: #777;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }
#contact-form .txtinput:focus { 
    color: #999;
    border-color: rgb(255, 102, 0);
    border-color: rgba(255, 102, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
    outline: 0 none; 
    }
#contact-form #name {
    background: #FFF url('../images/contact/user.png') 5px 4px no-repeat;
    }
#contact-form #email {
    background: #FFF url('../images/contact/email.png') 5px 4px no-repeat;
    }
#contact-form textarea {
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #DEDEDE;;
    margin-bottom: 15px;
    font-size: 1em;
    padding: 11px 25px;
    padding-left: 55px;
    width: 90%;
    height: 180px;
    color: #777;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }
#contact-form textarea:focus {
    color: #999;
    border-color: rgb(255, 102, 0);
    border-color: rgba(255, 102, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
    outline: 0 none; 
    }
#contact-form .txtblock {
    background: #FFF url('../images/contact/speech.png') 5px 4px no-repeat;
    }
#contact-form #slider { width: 60%; }
#contact-form #aligned { 
    box-sizing: border-box; 
    float: left; 
    width: 450px; 
    }
#wrapping { width: 100%; box-sizing: border-box; }

一切正常，直到我在较小的设备/屏幕上显示，然后字段不响应，并且开箱即用，并且在链接中提供的图像中可以看到背景上的溢出。任何帮助将非常感激。感谢。

链接到示例：http://www.livepurposely.net/image.png

Answer 1

在您的CSS中，您将#aligned的宽度限制为450px并在填充中使用px，最好在填充中使用％来进行响应式设计

信息：px将宽度限制为指定单位且不适合响应式设计，请改用％

更新CSS

#contact-form .txtinput {
   padding: 3% 5%; // earlier 11px 25px
   padding-left: 2%;
}

#contact-form textarea {
   padding: 3% 5%;
   padding-left: 2%;
}

#contact-form #aligned {
    box-sizing: border-box;
    float: left;
    width: 90%; // earlier it was 450px update % as per your need
}

http://jsfiddle.net/raunakkathuria/nh5aZ/2/

联系表单字段无响应/无法扩展

1 个答案: