gpt4 book ai didi

css - 如何减少html表格中行之间的空间

转载 作者:行者123 更新时间:2023-11-28 08:41:58 25 4
gpt4 key购买 nike

我设计了这个注册表单。问题是两行之间的空间太大,即 ID 和密码部分。如何减少空间?

CSS(在 HTML/Head/Style 元素内)

<html>
<head>
<title>Signup</title>
<style>
div
{
position:absolute;
top:300px;
left:550px;
width:200px;
}

table
{
height:150px;
border:1px solid black;
border-radius:10px;
box-shadow:0px 0px 2px #777;

}
td
{
padding:10px;

}

.ip
{
border-radius:5px;
border:1px solid grey;

}

.label
{
color:#EE6AA7;
font-family:Helvetica;
font-size:17px;
}
</style>
</head>

HTML(在 HTML/正文中)

<body>
<div>
<form>
<table>
<tr>
<td class="label">Id</td>
<td><input type="text" name="id" class="ip"></td>
</tr>
<tr>
<td class="label">Password</td>
<td><input type="text" name="pswrd" class="ip"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

最佳答案

那是因为您的表格高度为 150 像素,而每行的高度变为 75 像素 (150/2)。要解决这个问题,只需从表格中删除高度并为 td 元素设置高度。例如:

  table{
padding: 10px;
/*height:150px;*/
border:1px solid black;
border-radius:10px;
box-shadow:0px 0px 2px #777;
}
td{
height:20px;
/*padding:10px;*/

}

关于css - 如何减少html表格中行之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18926132/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com