为什么我的 css 中的"文本"与我的输入不一致，我无法弄清楚这一点

我正在使用下面的代码将数据添加到我的网络中：

//代码//

.AddData input {
    font-size: 15px;
    padding: 2.5px;
    margin-bottom: 15px;
}
.AddData [type='text'] {
    font-weight: bold;
    font-size: 18px:
    margin-bottom: 6px;
}
.AddData button {
    transform: translate(120%,-50%);
    outline: 1px solid black;
    width: 80px;
    height: 40px;
    font-size: 16px;
    background: #ff267e;
    display: block;
    cursor: pointer;
    color: #fff;
    border: none;
}

.AddData tr {
    margin-bottom: auto;
}

以下是我用于我的网站的 html 代码。

html//

 <link rel="stylesheet" type="text/css" href="web.css">
<body>
   <div class ="AddData">
    <form action="add.php" method="POST" name="form1">
        <table width="25%" border="0">
            <tr> 
                <td>User ID: </td>
                <td><input type="text" name="User_id" required autocomplete="off"></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="Password" required autocomplete="off"></td>
            </tr>
            <tr>
            <td>Confirm Password:</td>
                <td><input type="password" name="CPass" required autocomplete="off" ></td>
            </tr>
            <tr>  
                <td></td>
                <td><input type="submit" name="submit" value="Add"></td>
            </tr>
        </table>

这就是它在我的网站上显示的内容，我只需要将"User_id"内联为输入框。

https://i.stack.imgur.com/yBPEW.png

您必须使用填充而不是边距来添加td内的空间。我留下了一些注释代码供您检查我从您的代码中删除了哪些样式。您必须解决一些问题，例如字体大小的差异。

.AddData input {
    font-size: 15px;
    padding: 2.5px;
    /* margin-bottom: 15px; */
}
.AddData [type='text'] {
    font-weight: bold;
    font-size: 18px; /*; was missing*/
    /* margin-bottom: 6px; */
}
.AddData button {
    transform: translate(120%,-50%);
    outline: 1px solid black;
    width: 80px;
    height: 40px;
    font-size: 16px;
    background: #ff267e;
    display: block;
    cursor: pointer;
    color: #fff;
    border: none;
}
/* .AddData tr {
    margin-bottom: 15px;
} */
.AddData td {
    padding-bottom: 15px;
}

<body>
   <div class ="AddData">
    <form action="add.php" method="POST" name="form1">
      <table width="25%" border="0">
        <tr> 
          <td>User ID: </td>
          <td><input type="text" name="User_id" required autocomplete="off"></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><input type="password" name="Password" required autocomplete="off"></td>
        </tr>
        <tr>
          <td>Confirm Password:</td>
          <td><input type="password" name="CPass" required autocomplete="off" ></td>
        </tr>
        <tr>  
          <td></td>
          <td><input type="submit" name="submit" value="Add"></td>
        </tr>
      </table>
    </form>
  </div>
</body>

相关内容

最新更新

热门标签：