请问老师像我这个表单中第一行与第二行中的文本框怎样调整呢?

请问老师像我这个表单中第一行与第二行中的文本框怎样调整呢?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单和表格的嵌入</title>
</head>
<body>
<!-- 表单属性:[action:提交到的服务端地址;]
 [method:指定提交时用哪种HTTP方法:POST/GET;]
 [name:标识;]
 [autocomplete:浏览器是否可以自动填充;]
 [enctype:指定表单内容编码]-->
<form action="" method="" name="" id="" autocomplete="" enctype="UTF-8">
<table border="3">
<tr>
<td>姓名</td>
<td cellspacing="0"><input type="text" value="请输入姓名" maxlength="10"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" value="请输入密码" maxlength="10"></td>
</tr>
<tr>
<td>性别</td>
<td><input name="genter" value="0" type="radio" checked>男<input name="genter" value="1" type="radio">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" value="0" checked>电影
<input type="checkbox" value="1">音乐
<input type="checkbox" value="2">唱歌
<input type="checkbox" value="3">游戏</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5add2ef6000100cb03900160.jpg

如上图中,与整体未对齐。

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

我按照你贴的代码,是对齐的呀~~

http://img1.sycdn.imooc.com//climg/5ae1942b0001b56d04190284.jpg

你运行的是你贴的这些代码么?

另外,建议将提示信息,例如“请输入姓名”写为:placeholder ="请输入姓名"

value是获取到的值,placeholder是提示信息。

祝学习愉快!

  • 慕虎8754231 提问者 #1
    没有,我的意思是文本框右边的框与外边缘的框没重合
    2018-04-26 17:08:18
  • 一叶知秋519 回复 提问者 慕虎8754231 #2
    <input style="border: none;width: 100%" type="text" placeholder ="请输入姓名" maxlength="10" /> 给input框增加一个样式~~ 祝学习愉快!
    2018-04-26 17:43:31
  • 慕虎8754231 提问者 回复 一叶知秋519 #3
    可以了,谢谢老师!
    2018-04-28 10:04:12
提问者 慕虎8754231 2018-04-26 15:55:03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单和表格的嵌入</title>
</head>
<body>
<!-- 表单属性:[action:提交到的服务端地址;]
 [method:指定提交时用哪种HTTP方法:POST/GET;]
 [name:标识;]
 [autocomplete:浏览器是否可以自动填充;]
 [enctype:指定表单内容编码]-->
<form action="" method="" name="" id="" autocomplete="" enctype="UTF-8">
<table border="3">
<tr>
<h1>注册信息</h1>
<hr/ color="#336699">
<td >姓名</td>
<td cellspacing="0"><input type="text" value="请输入姓名" maxlength="10" /></td>
</tr>
<tr></tr>
<tr>
<td>密码</td>
<td><input type="password" value="请输入密码" maxlength="10"></td>
</tr>
<tr>
<td>性别</td>
<td><input name="genter" value="0" type="radio" checked>男<input name="genter" value="1" type="radio">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" value="0" checked>电影
<input type="checkbox" value="1">音乐
<input type="checkbox" value="2">唱歌
<input type="checkbox" value="3">游戏</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>

老师看,按照你说的左边又没靠齐。http://img1.sycdn.imooc.com//climg/5ae185a1000136bf08340379.jpg

好帮手慕珊 2018-04-25 11:05:31

可以为td标签添加右对齐的属性,如align="right",祝学习愉快!

http://img1.sycdn.imooc.com//climg/5adff0600001085d10420109.jpg

  • 提问者 慕虎8754231 #1
    老师,不对呀,左边又没靠齐了。
    2018-04-26 15:53:36
好帮手慕珊 2018-04-23 15:01:07

你是说文本框的边离着边框太近了,而不是像单选和复选框一样有点距离?

  • 提问者 慕虎8754231 #1
    我想让文本框与右边对齐,因为“姓名”与“密码”的文本框与外部的框没右对齐
    2018-04-25 10:15:29
  • 提问者 慕虎8754231 #2
    文本框与边框太远了,就是没有像单选那一行那么离外边框那么近。
    2018-04-28 08:07:44
  • 一叶知秋519 回复 提问者 慕虎8754231 #3
    请问你的问题解决了嘛?
    2018-04-28 09:49:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师