html使多行文字与多个文字区距离一致

最新推荐文章于 2023-08-16 22:26:58 发布

刘不胖563

最新推荐文章于 2023-08-16 22:26:58 发布

阅读量429

点赞数 1

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_64291361/article/details/127235897

版权

笔记专栏收录该内容

10 篇文章

订阅专栏

在html中存在多行文字与多个<input type="text"|"checkbox"|"button"/>(或者其他类型)标签时，

由于文字的个数不能保持一致，从而导致后面的文字区的距离参差不齐

<html>
	<head>
		<title>调查问卷</title>
	</head>
	<body>
		<p>用户信息表</p>
		<form style = "border:1px soild red;">
			姓名：<input type = "text" /><br>
			年龄：<input type = "password" /><br>
			性别：男<input type = "radio"  >
			          女<input type = "radio" ><br>
			喜欢的电影：<input type = "password" /><br>
		         	个人特长：<input type = "password"/><br>
			爱好：<input type = "checkbox" />滑雪
			          <input type = "checkbox" />爬山
			          <input type = "checkbox" />游泳
			          <input type = "checkbox" />上网
			          <input type = "checkbox" /> 踢球 
		</form>
	</body>
</html>

代码效果：

这是由于字数差异导致文字区距离不一致。

解决办法：

<tr>

</tr>

</table>

<html>
	<head>
		<title>调查问卷</title>
	</head>

	<body>
<table border="1">

			<p>用户信息表</p>
		<form style = "border:1px soild red;">
			<tr><td>姓名：</td><td><input type = "text" /></td></tr>
			<tr><td>年龄：</td><td><input type = "text" /></td></tr>
			<tr><td>性别：</td><td>
			          男<input type = "radio"  >
			          女<input type = "radio" ></td></tr>
			<tr><td>喜欢的电影：</td><td> <input type = "text"/></td></tr>
			<tr><td>	个人特长：</td><td><input type = "text" /></td></tr>
			<tr><td>爱好：</td><td>
			          <input type = "checkbox" />滑雪
			          <input type = "checkbox" />爬山
			          <input type = "checkbox" />游泳
			          <input type = "checkbox" />上网
			          <input type = "checkbox" /> 踢球 </td></tr>
		</form>
</tr>
</table>
		
	</body>
</html>

效果