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中犯了一个大错误，所以它不起作用，因为对于表单尺寸（宽度，高度）你必须根据你的喜好在px，％，em ..etc中提到正确的值..

并从你提到的宽度的html表单中删除样式标记：200px;为css宽度工作..

替换此代码..

width="104" height="142";

用这个..

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

Answer 2

你以错误的方式编写css代码用下面的代码替换你的css代码，你会看到影响

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

修改表单框的高度和长度

2 个答案: