4

我设计了这个注册表单。问题是两行之间的空间太大，即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>
4

2 回答 2

2

那是因为您的表格高度为 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;*/

        }
于 2013-09-20T21:44:53.720 回答
1

style="border-collapse: collapse"在桌子上使用。

于 2013-09-20T21:28:48.660 回答