鱼C论坛

 找回密码
 立即注册
查看: 3388|回复: 3

[已解决]1.我的代码要怎么改可以实现图中年月日三个框在同一行上2.实现提交和重填间存在间隔

[复制链接]
发表于 2021-7-13 12:38:41 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
<!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>
最佳答案
2021-7-13 13:43:41
<!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>
作业.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-13 13:43:41 | 显示全部楼层    本楼为最佳答案   
<!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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-7-13 16:30:53 | 显示全部楼层

抱歉还要再问你一下,表格左边那几个标题怎么样首尾字对齐呢,就像图里要求的那样
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-14 15:29:23 | 显示全部楼层
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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 14:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表