修改格式框

Question

我已經創建了下面的頁面的高度和長度： http://jsfiddle.net/mocfvg4w/17/

但我不能工作，如何降低形式的高度和增加了盒的長度是多少？

我希望能夠使高度略小盒至少兩倍的長度。

我已經作出的代碼是：

<div id="wrapper"> 
    <div class="form-holder"> 
     <img src="https://i.imgur.com/4HDC0Vs.jpg" alt="header" width="500" height="906"> 
     <form id="form" action="#" method="post" name="result" style="width:200px;"> 
      <table> 
       <tbody> 
        <tr> 
         <td> 
          <input type="text" name="id" id="input_field" maxlength="4" /> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </div> 
</div> 

CSS

#form { 
    position: absolute; 
    top: 300px; 
    left: 300px; 
    margin-left:-25px; 
    width:104px; 
    height:142px; 
} 

.form-holder { 
    position: relative; 
} 

的Javascript

$("#input_field").keyup(function(){ 
if($(this).val().length == 4 && $(this).val() == "2000") { 
    alert("it works"); 
    // $('#form') 
    //  .submit(); 
} 
}) 

Answer 1

你寫在錯誤的方式CSS代碼 下面的代碼替換你的CSS代碼你會看到影響

$("#input_field").keyup(function(){ 
 
    if($(this).val().length == 4 && $(this).val() == "2000") { 
 
     alert("it works"); 
 
     // $('#form') 
 
     //  .submit(); 
 
    } 
 
})

form { 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 300px; 
 
    margin-left:-25px; 
 
    width:200px; 
 
    height:100px; 
 
    border:solid 1px; 
 
} 
 

 
form > input#input_field { 
 
    width:200px; 
 
} 
 

 
.form-holder { 
 
    position: relative; 
 
}

<div id="wrapper"> 
 
    <div class="form-holder"> 
 
     <img src="https://i.imgur.com/4HDC0Vs.jpg" alt="header" width="500" height="906"> 
 
     <form id="form" action="#" method="post" name="result"> 
 
<td> 
 
    <input type="text" name="id" id="input_field" maxlength="200"/> 
 
</td> 
 
</form> 
 
    </div>

Answer 2

你在你的CSS一個很大的錯誤，以便它不適合形成規模，因爲工作（寬，高），您必須在PX提正確的價值觀，％，EM ..等根據您的喜好..

，並從那裏你所提到的寬度HTML表單中刪除的樣式標籤：200像素;對CSS寬度工作..

替換此代碼..

width="104" height="142"; 

與這個..

width="104px" height="142px";