在一个简单的HTML表单中，我的文本框的尺寸不正确。当我试图添加Pincode城市状态验证时。我试着改变它，但它又是一样的。下面是我的代码片段。请帮我输入代码
index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#pincode{width:21%;}
.textbox{
width: 30%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-left:2%;
}
/* CODE */
.btn{
font-weight: 400;
text-align: center;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
height: 46px;
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
margin-left:2%;
}
h2{font-family:Arial; font-size:30px; text-align:center;}
</style>
</head>
<body>
<div class="container">
<div><h2>Get city from Pincode</h2></div>
<div> </div>
<form autocomplete="off" method="post" id="frmPinCode" style="text-align:center;">
<div>
<input type="text" class="textbox" name="pincode" id="pincode" placeholder="Enter Pincode" autocomplete="new-password">
<input type="button" class="btn" value="Get Details">
</div>
<div> </div>
<div>
<input type="text" class="textbox" id="city" disabled placeholder="City"><br/><br/>
<input type="text" class="textbox" id="state" disabled placeholder="State">
</div>
</form>
</div>
</body>
</html>
```下面是我的表单的屏幕截图。
index.html
您的css和html有很多问题：
试着学习引导它会帮你很多，引导
注意：当您想在CSS上为它们赋予属性时，不能使用class="textbox" id="pincode"，请多练习。
CSS：
form{
width:30%;
margin:0 auto;
}
#pincode{width:calc(100% - 120px);}
.textbox{width: 100%;}
.textbox, #pincode{
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin:0;
}
/* CODE */
.btn{
text-align: center;
cursor: pointer;
border: 2px solid #5cb85c;
padding: 13px;
width:110px;
display:inline-block;
font-size: 14px;
margin-top:-6px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
color: #fff;
background-color: #5cb85c;
}
h2{font-family:Arial; font-size:30px; text-align:center;}
HTML:
<div class="container">
<div><h2>Get city from Pincode</h2></div>
<div> </div>
<form autocomplete="off" method="post" id="frmPinCode">
<div>
<input type="text" name="pincode" id="pincode" placeholder="Enter Pincode" autocomplete="new-password">
<input type="button" class="btn" value="Get Details">
</div>
<div> </div>
<div>
<input type="text" class="textbox" id="city" disabled placeholder="City"><br/><br/>
<input type="text" class="textbox" id="state" disabled placeholder="State">
</div>
</form>
</div>