1.我的代码要怎么改可以实现图中年月日三个框在同一行上2.实现提交和重填间存在间隔
<!DOCTYPE html><html>
<body>
<form action="/demo/demo_form.asp">
<table border="1" align="center" cellpadding="1" cellspacing="1" >
<tr>
<td width="125" height="30">姓名：</td>
<td width="300"><input type="text" name="姓名"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="性别" value="男" checked>男
<input type="radio" name="性别" value="女" checked>女
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<input type="text">年<input type="text">月<input type="text">日
</td>
<tr>
<td>所在省份：</td>
<td>
<select>
<option>-请选择-</option>
<option>北京市</option>
<option>上海市</option>
<option>天津市</option>
<option>重庆市</option>
<option>河北省</option>
<option>山西省</option>
<option>内蒙古自治区</option>
<option>辽宁省</option>
<option>吉林省</option>
<option>黑龙江省</option>
<option>江苏省</option>
<option">浙江省</option>
<option>安徽省</option>
<option>福建省</option>
<option>江西省</option>
<option>山东省</option>
<option>河南省</option>
<option>湖北省</option>
<option>湖南省</option>
<option>广东省</option>
<option>广西壮族自治区</option>
<option>海南省</option>
<option>四川省</option>
<option>贵州省</option>
<option>云南省</option>
<option>西藏自治区</option>
<option>陕西省</option>
<option>甘肃省</option>
<option>宁夏回族自治区</option>
<option>青海省</option>
<option>新疆维吾尔族自治区</option>
<option>香港特别行政区</option>
<option>澳门特别行政区</option>
<option>台湾省</option>
<option>其它</option>
</select>
</td>
</tr>
<tr>
<td>电子信箱：</td>
<td><input type="text" name="电子信箱"></td>
</tr>
<tr>
<td>类别:</td>
<td>
<select>
<option>函授</option>
<option>自考</option>
</td>
</tr>
<tr>
<td>备注:</td>
<td>
<textarea style="overflow:scroll; overflow-x:hidden;"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"><input type="submit" value="重填"></td>
</tr>
</form>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<style>
.gridContainer {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
#submit {
display: grid;
width: 100%;
/*grid-column-gap: 50px;*/
grid-template-columns: 200px 200px;
}
.tj {
margin-left: 100px;
}
</style>
</head>
<body>
<form action="/demo/demo_form.asp">
<table border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
<td width="125" height="30">姓 名：</td>
<td width="300"><input type="text" name="姓名"></td>
</tr>
<tr>
<td>性 别：</td>
<td>
<input type="radio" name="性别" value="男" checked>男
<input type="radio" name="性别" value="女" checked>女
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<div class='gridContainer'>
<input class="y" type="text">年<input class="y" type="text">月<input class="y" type="text">日
</div>
</td>
<tr>
<td>所在省份：</td>
<td>
<select>
<option>-请选择-</option>
<option>北京市</option>
<option>上海市</option>
<option>天津市</option>
<option>重庆市</option>
<option>河北省</option>
<option>山西省</option>
<option>内蒙古自治区</option>
<option>辽宁省</option>
<option>吉林省</option>
<option>黑龙江省</option>
<option>江苏省</option>
<option">浙江省</option>
<option>安徽省</option>
<option>福建省</option>
<option>江西省</option>
<option>山东省</option>
<option>河南省</option>
<option>湖北省</option>
<option>湖南省</option>
<option>广东省</option>
<option>广西壮族自治区</option>
<option>海南省</option>
<option>四川省</option>
<option>贵州省</option>
<option>云南省</option>
<option>西藏自治区</option>
<option>陕西省</option>
<option>甘肃省</option>
<option>宁夏回族自治区</option>
<option>青海省</option>
<option>新疆维吾尔族自治区</option>
<option>香港特别行政区</option>
<option>澳门特别行政区</option>
<option>台湾省</option>
<option>其它</option>
</select>
</td>
</tr>
<tr>
<td>电子信箱：</td>
<td><input type="text" name="电子信箱"></td>
</tr>
<tr>
<td>类 别:</td>
<td>
<select>
<option>函授</option>
<option>自考</option>
</td>
</tr>
<tr>
<td>备注:</td>
<td>
<textarea style="overflow:scroll; overflow-x:hidden;"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="submit">
<input type="submit" class="tj" value="提交"><input class="tj" type="submit" value="重填">
</div>
</td>
</tr>
</form>
</body>
</html> wp231957 发表于 2021-7-13 13:43
抱歉还要再问你一下，表格左边那几个标题怎么样首尾字对齐呢，就像图里要求的那样 TSwangming 发表于 2021-7-13 16:30
抱歉还要再问你一下，表格左边那几个标题怎么样首尾字对齐呢，就像图里要求的那样
<!DOCTYPE html>
<html>
<head>
<style>
.gridContainer {
display: grid;
width: 100%;
grid-template-columns: 80px 20px 80px 20px 80px 20px;
}
#submit {
display: grid;
width: 100%;
/*grid-column-gap: 50px;*/
grid-template-columns: 100px 100px;
}
.tj {
margin-left: 40px;
}
.wp {
margin-left: 20px;
}
</style>
</head>
<body>
<form action="/demo/demo_form.asp">
<table border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
<td width="125" height="30">
<div class="wp">姓  名：</div>
</td>
<td width="300"><input type="text" name="姓名"></td>
</tr>
<tr>
<td>
<div class="wp">性  别：</div>
</td>
<td>
<input type="radio" name="性别" value="男" checked>男
<input type="radio" name="性别" value="女" checked>女
</td>
</tr>
<tr>
<td>
<div class="wp">出生日期：</div>
</td>
<td>
<div class='gridContainer'>
<input class="y" type="text">年<input class="y" type="text">月<input class="y" type="text">日
</div>
</td>
<tr>
<td>
<div class="wp">所在省份：</div>
</td>
<td>
<select>
<option>-请选择-</option>
<option>北京市</option>
<option>上海市</option>
<option>天津市</option>
<option>重庆市</option>
<option>河北省</option>
<option>山西省</option>
<option>内蒙古自治区</option>
<option>辽宁省</option>
<option>吉林省</option>
<option>黑龙江省</option>
<option>江苏省</option>
<option">浙江省</option>
<option>安徽省</option>
<option>福建省</option>
<option>江西省</option>
<option>山东省</option>
<option>河南省</option>
<option>湖北省</option>
<option>湖南省</option>
<option>广东省</option>
<option>广西壮族自治区</option>
<option>海南省</option>
<option>四川省</option>
<option>贵州省</option>
<option>云南省</option>
<option>西藏自治区</option>
<option>陕西省</option>
<option>甘肃省</option>
<option>宁夏回族自治区</option>
<option>青海省</option>
<option>新疆维吾尔族自治区</option>
<option>香港特别行政区</option>
<option>澳门特别行政区</option>
<option>台湾省</option>
<option>其它</option>
</select>
</td>
</tr>
<tr>
<td>
<div class="wp">电子信箱：</div>
</td>
<td><input type="text" name="电子信箱"></td>
</tr>
<tr>
<td>
<div class="wp">类  别:</div>
</td>
<td>
<select>
<option>函授</option>
<option>自考</option>
</td>
</tr>
<tr>
<td><div class="wp">备  注:</div></td>
<td>
<textarea style="overflow:scroll; overflow-x:hidden;"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="submit">
<input type="submit" class="tj" value="提交"><input class="tj" type="submit" value="重填">
</div>
</td>
</tr>
</form>
</body>
</html>
页:
[1]