关于表格对齐和自定义按钮图片
来源：3-1 表单页面调整
慕村6371425
2020-06-10 11:21:27
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list input</title>
<style>
.left { text-align:right;
}
</style>
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699"/>
<form>
<table width="600px" bgcolor="#f2f2f2" align="center" border="1" >
<div >
<tr>
<td align="right" class="left">姓名：</td>
<td><input name="username" type="text" placeholder="请输入姓名" size="25" maxlength="6"></td>
</tr>
<tr>
<td align="right" class="left">邮箱：</td>
<td ><input name="mail" type="text" value="@gmail.com" size="25"></td>
</tr>
<tr>
<td class="left">密码：</td>
<td><input type="password" name="psw" size="25" maxlength="6" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="left" >请确认密码：</td>
<td><input type="password" name="psw_confirm" size="25" maxlength="6" placeholder="请再次输入密码"></td>
</tr>
<tr>
<td class="left">上传照片：</td>
<td><input type="file" name="photo" multiple="true"></td>
</tr>
<tr>
<td class="left">性别：</td>
<td>男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman">
保密<input type="radio" name="sex" value="secret" checked></td>
</tr>
<tr>
<td class="left">爱好：</td>
<td>读书<input type="checkbox" name="mulchoice1" value="read" checked>
跳舞<input type="checkbox" name="mulchoice1" value="dance">
唱歌<input type="checkbox" name="mulchoice1" value="sing"></td>
</tr>
<tr>
<td class="left">运动：</td>
<td>打球<input type="checkbox" name="mulchoice2" value="basketball" checked>
踢球<input type="checkbox" name="mulchoice2" value="football" checked>
网球<input type="checkbox" name="mulchoice2" value="tennis"></td>
</tr>
<tr>
<td class="left">请选择城市：</td>
<td class="right">
<select name="city"> <!--下拉菜单，select里面不能添加size 和 multiple 属性-->
<option value="default" selected>--请选择--</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="tj">天津</option>
<option value="cs">长沙</option>
</select>
<select name="city" size="5" multiple> <!--列表表单-->
<option value="default">--请选择--</option>
<option value="bj">北京</option>
<option value="gz" selected>广州</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="tj">天津</option>
<option value="cs">长沙</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><select name="city" size="5" multiple> <!--列表表单-->
<option value="default">--请选择--</option>
<option></option>
<optgroup label="国内">
<option value="bj">北京</option>
<option value="gz" selected>广州</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="tj">天津</option>
<option value="cs">长沙</option>
</optgroup>
<optgroup label="国外">
<option value="ny">纽约</option>
<option value="syd" selected>悉尼</option>
<option value="mel">猫本</option>
<option value="tyk">东京</option>
<option value="la">洛杉矶</option>
<option value="adl">阿德</option>
</optgroup>
</select></td>
<!-- <td></td>-->
</tr>
<tr>
<td class="left">简介</td> <!--（1）当textarea标签中间有文字的时候，会覆盖默认文字（默认文字是在textarea标签中间没有value的时候才出现）所 以在浏览器中删掉中间的文字才能看到默认文字
（2）当把textarea标签中间的文字删除掉（textarea标签不能换行），默认文字就能显示出来了-->
<td align="left"><textarea name="multitext" rows="6" cols="20" placeholder="个人简介"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="来点我" name="button">
<input type="submit" value="submit" name="submit">
<input type="reset" value="重置" name="reset"></td>
<!-- <td></td>-->
</tr>
<tr>
<td colspan="2" align="center"><input type="image" src="product.png" name="image-button" width="50px" height="50px">
<input type="reset" style="background:url(product.png);" name="image-reset-button"/></td>
<!--<td><input type="hidden" name="hidden" value="这是一个用户注册信息"</td>-->
</tr>
<tr>
<td colspan="2" align="center"><input type="image" src="测试.jpg" name="image-button" width="100px" height="100px">
<input type="reset" style="background:url(product.png);" name="image-reset-button"/></td>
<!--<td><input type="hidden" name="hidden" value="这是一个用户注册信息"</td>-->
</tr>
</div>
</table>
</form>
</body>
</html>
1. 老师，我想问问表格左列为什么没有添加对齐样式就自动往左对齐了，我只是用css添加了左列的右对齐。
2. 第二个问题是
<input type="reset" style="background:url(product.png);" name="image-reset-button"/>
这段我想把reset按钮自定义图片，图片的url没错，为什么没效果呢？
1回答
-
同学你好，解答如下：
1、请问同学是指右侧，如下内容自动左对齐是嘛？
text-align 属性规定元素中的文本的水平对齐方式。默认值：如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。
可以看下输入框中direction 的属性是什么（在控制台(按F12)查看）：
所以默认的默认值是 left；那么就实现了自动左对齐；
2、如果是type为reset的话，无法直接引入图片哦。只有当type="image"的时候才能引入图片，要添加在src属性上：
可以通过css去给type为reset添加背景图片，如下：
效果：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题