设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 1.我的代码要怎么改可以实现图中年月日三个框在同一行上 ...
返回列表 发新帖
查看: 3723|回复: 3

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

[复制链接]
TSwangming
发表于 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>
最佳答案
月排行榜 / 总排行榜
wp231957
2021-7-13 13:43:41
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <style>
  6.         .gridContainer {
  7.             display: grid;
  8.             width: 100%;
  9.             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  10.         }
  11.         
  12.         #submit {
  13.             display: grid;
  14.             width: 100%;
  15.             /*grid-column-gap: 50px;*/
  16.             grid-template-columns: 200px 200px;
  17.         }
  18.         
  19.         .tj {
  20.             margin-left: 100px;
  21.         }
  22.     </style>
  23. </head>

  25. <body>
  26.     <form action="/demo/demo_form.asp">
  27.         <table border="1" align="center" cellpadding="1" cellspacing="1">
  28.             <tr>
  29.                 <td width="125" height="30">姓 名：</td>
  30.                 <td width="300"><input type="text" name="姓名"></td>
  31.             </tr>
  32.             <tr>
  33.                 <td>性 别：</td>
  34.                 <td>
  35.                     <input type="radio" name="性别" value="男" checked>男
  36.                     <input type="radio" name="性别" value="女" checked>女
  37.                 </td>
  38.             </tr>
  39.             <tr>
  40.                 <td>出生日期：</td>
  41.                 <td>
  42.                     <div class='gridContainer'>
  43.                         <input class="y" type="text">年<input class="y" type="text">月<input class="y" type="text">日
  44.                     </div>

  46.                 </td>
  47.                 <tr>
  48.                     <td>所在省份：</td>
  49.                     <td>
  50.                         <select>
  51.         <option>-请选择-</option>
  52.         <option>北京市</option>
  53.         <option>上海市</option>
  54.         <option>天津市</option>
  55.         <option>重庆市</option>
  56.         <option>河北省</option>
  57.         <option>山西省</option>
  58.         <option>内蒙古自治区</option>
  59.         <option>辽宁省</option>
  60.         <option>吉林省</option>
  61.         <option>黑龙江省</option>
  62.         <option>江苏省</option>
  63.         <option">浙江省</option>
  64.         <option>安徽省</option>
  65.         <option>福建省</option>
  66.         <option>江西省</option>
  67.         <option>山东省</option>
  68.         <option>河南省</option>
  69.         <option>湖北省</option>
  70.         <option>湖南省</option>
  71.         <option>广东省</option>
  72.         <option>广西壮族自治区</option>
  73.         <option>海南省</option>
  74.         <option>四川省</option>
  75.         <option>贵州省</option>
  76.         <option>云南省</option>
  77.         <option>西藏自治区</option>
  78.         <option>陕西省</option>
  79.         <option>甘肃省</option>
  80.         <option>宁夏回族自治区</option>
  81.         <option>青海省</option>
  82.         <option>新疆维吾尔族自治区</option>
  83.         <option>香港特别行政区</option>
  84.         <option>澳门特别行政区</option>
  85.         <option>台湾省</option>
  86.         <option>其它</option>
  87. </select>
  88.                     </td>
  89.                 </tr>
  90.                 <tr>
  91.                     <td>电子信箱：</td>
  92.                     <td><input type="text" name="电子信箱"></td>
  93.                 </tr>
  94.                 <tr>
  95.                     <td>类 别:</td>
  96.                     <td>
  97.                         <select>
  98. <option>函授</option>
  99. <option>自考</option>
  100. </td>
  101. </tr>
  102. <tr>
  103. <td>备  注:</td>
  104. <td>
  105. <textarea style="overflow:scroll; overflow-x:hidden;"></textarea>
  106. </td>
  107. </tr>
  108. <tr>
  109. <td>  </td>
  110. <td>
  111.     <div id="submit">
  112.         <input type="submit" class="tj" value="提交"><input class="tj" type="submit" value="重填">
  113.     </div>
  114. </td>
  115. </tr>
  116. </form>
  117. </body>
  118. </html>
复制代码
作业.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

wp231957
发表于 2021-7-13 13:43:41 | 显示全部楼层    本楼为最佳答案   
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <style>
  6.         .gridContainer {
  7.             display: grid;
  8.             width: 100%;
  9.             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  10.         }
  11.         
  12.         #submit {
  13.             display: grid;
  14.             width: 100%;
  15.             /*grid-column-gap: 50px;*/
  16.             grid-template-columns: 200px 200px;
  17.         }
  18.         
  19.         .tj {
  20.             margin-left: 100px;
  21.         }
  22.     </style>
  23. </head>

  25. <body>
  26.     <form action="/demo/demo_form.asp">
  27.         <table border="1" align="center" cellpadding="1" cellspacing="1">
  28.             <tr>
  29.                 <td width="125" height="30">姓 名：</td>
  30.                 <td width="300"><input type="text" name="姓名"></td>
  31.             </tr>
  32.             <tr>
  33.                 <td>性 别：</td>
  34.                 <td>
  35.                     <input type="radio" name="性别" value="男" checked>男
  36.                     <input type="radio" name="性别" value="女" checked>女
  37.                 </td>
  38.             </tr>
  39.             <tr>
  40.                 <td>出生日期：</td>
  41.                 <td>
  42.                     <div class='gridContainer'>
  43.                         <input class="y" type="text">年<input class="y" type="text">月<input class="y" type="text">日
  44.                     </div>

  46.                 </td>
  47.                 <tr>
  48.                     <td>所在省份：</td>
  49.                     <td>
  50.                         <select>
  51.         <option>-请选择-</option>
  52.         <option>北京市</option>
  53.         <option>上海市</option>
  54.         <option>天津市</option>
  55.         <option>重庆市</option>
  56.         <option>河北省</option>
  57.         <option>山西省</option>
  58.         <option>内蒙古自治区</option>
  59.         <option>辽宁省</option>
  60.         <option>吉林省</option>
  61.         <option>黑龙江省</option>
  62.         <option>江苏省</option>
  63.         <option">浙江省</option>
  64.         <option>安徽省</option>
  65.         <option>福建省</option>
  66.         <option>江西省</option>
  67.         <option>山东省</option>
  68.         <option>河南省</option>
  69.         <option>湖北省</option>
  70.         <option>湖南省</option>
  71.         <option>广东省</option>
  72.         <option>广西壮族自治区</option>
  73.         <option>海南省</option>
  74.         <option>四川省</option>
  75.         <option>贵州省</option>
  76.         <option>云南省</option>
  77.         <option>西藏自治区</option>
  78.         <option>陕西省</option>
  79.         <option>甘肃省</option>
  80.         <option>宁夏回族自治区</option>
  81.         <option>青海省</option>
  82.         <option>新疆维吾尔族自治区</option>
  83.         <option>香港特别行政区</option>
  84.         <option>澳门特别行政区</option>
  85.         <option>台湾省</option>
  86.         <option>其它</option>
  87. </select>
  88.                     </td>
  89.                 </tr>
  90.                 <tr>
  91.                     <td>电子信箱：</td>
  92.                     <td><input type="text" name="电子信箱"></td>
  93.                 </tr>
  94.                 <tr>
  95.                     <td>类 别:</td>
  96.                     <td>
  97.                         <select>
  98. <option>函授</option>
  99. <option>自考</option>
  100. </td>
  101. </tr>
  102. <tr>
  103. <td>备  注:</td>
  104. <td>
  105. <textarea style="overflow:scroll; overflow-x:hidden;"></textarea>
  106. </td>
  107. </tr>
  108. <tr>
  109. <td>  </td>
  110. <td>
  111.     <div id="submit">
  112.         <input type="submit" class="tj" value="提交"><input class="tj" type="submit" value="重填">
  113.     </div>
  114. </td>
  115. </tr>
  116. </form>
  117. </body>
  118. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

抱歉还要再问你一下，表格左边那几个标题怎么样首尾字对齐呢，就像图里要求的那样
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
发表于 2021-7-14 15:29:23 | 显示全部楼层
TSwangming 发表于 2021-7-13 16:30
抱歉还要再问你一下，表格左边那几个标题怎么样首尾字对齐呢，就像图里要求的那样
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <style>
  6.         .gridContainer {
  7.             display: grid;
  8.             width: 100%;
  9.             grid-template-columns: 80px 20px 80px 20px 80px 20px;
  10.         }
  11.         
  12.         #submit {
  13.             display: grid;
  14.             width: 100%;
  15.             /*grid-column-gap: 50px;*/
  16.             grid-template-columns: 100px 100px;
  17.         }
  18.         
  19.         .tj {
  20.             margin-left: 40px;
  21.         }
  22.         
  23.         .wp {
  24.             margin-left: 20px;
  25.         }
  26.     </style>
  27. </head>

  29. <body>
  30.     <form action="/demo/demo_form.asp">
  31.         <table border="1" align="center" cellpadding="1" cellspacing="1">
  32.             <tr>
  33.                 <td width="125" height="30">
  34.                     <div class="wp">姓&emsp;&emsp;名：</div>
  35.                 </td>
  36.                 <td width="300"><input type="text" name="姓名"></td>
  37.             </tr>
  38.             <tr>
  39.                 <td>
  40.                     <div class="wp">性&emsp;&emsp;别：</div>
  41.                 </td>
  42.                 <td>
  43.                     <input type="radio" name="性别" value="男" checked>男
  44.                     <input type="radio" name="性别" value="女" checked>女
  45.                 </td>
  46.             </tr>
  47.             <tr>
  48.                 <td>
  49.                     <div class="wp">出生日期：</div>
  50.                 </td>
  51.                 <td>
  52.                     <div class='gridContainer'>
  53.                         <input class="y" type="text">年<input class="y" type="text">月<input class="y" type="text">日
  54.                     </div>

  56.                 </td>
  57.                 <tr>
  58.                     <td>
  59.                         <div class="wp">所在省份：</div>
  60.                     </td>
  61.                     <td>
  62.                         <select>
  63.         <option>-请选择-</option>
  64.         <option>北京市</option>
  65.         <option>上海市</option>
  66.         <option>天津市</option>
  67.         <option>重庆市</option>
  68.         <option>河北省</option>
  69.         <option>山西省</option>
  70.         <option>内蒙古自治区</option>
  71.         <option>辽宁省</option>
  72.         <option>吉林省</option>
  73.         <option>黑龙江省</option>
  74.         <option>江苏省</option>
  75.         <option">浙江省</option>
  76.         <option>安徽省</option>
  77.         <option>福建省</option>
  78.         <option>江西省</option>
  79.         <option>山东省</option>
  80.         <option>河南省</option>
  81.         <option>湖北省</option>
  82.         <option>湖南省</option>
  83.         <option>广东省</option>
  84.         <option>广西壮族自治区</option>
  85.         <option>海南省</option>
  86.         <option>四川省</option>
  87.         <option>贵州省</option>
  88.         <option>云南省</option>
  89.         <option>西藏自治区</option>
  90.         <option>陕西省</option>
  91.         <option>甘肃省</option>
  92.         <option>宁夏回族自治区</option>
  93.         <option>青海省</option>
  94.         <option>新疆维吾尔族自治区</option>
  95.         <option>香港特别行政区</option>
  96.         <option>澳门特别行政区</option>
  97.         <option>台湾省</option>
  98.         <option>其它</option>
  99. </select>
  100.                     </td>
  101.                 </tr>
  102.                 <tr>
  103.                     <td>
  104.                         <div class="wp">电子信箱：</div>
  105.                     </td>
  106.                     <td><input type="text" name="电子信箱"></td>
  107.                 </tr>
  108.                 <tr>
  109.                     <td>
  110.                         <div class="wp">类&emsp;&emsp;别:</div>
  111.                     </td>
  112.                     <td>
  113.                         <select>
  114. <option>函授</option>
  115. <option>自考</option>
  116. </td>
  117. </tr>
  118. <tr>
  119. <td><div class="wp">备&emsp;&emsp;注:</div></td>
  120. <td>
  121. <textarea style="overflow:scroll; overflow-x:hidden;"></textarea>
  122. </td>
  123. </tr>
  124. <tr>
  125. <td>  </td>
  126. <td>
  127.     <div id="submit">
  128.         <input type="submit" class="tj" value="提交"><input class="tj" type="submit" value="重填">
  129.     </div>
  130. </td>
  131. </tr>
  132. </form>
  133. </body>
  134. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-4-19 23:43

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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