Question

我使用以下代码将数据添加到我的网站：

// //代码

.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

Answer 1

您必须使用填充而不是边距来添加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>

为什么我的CSS中的'Text'不符合我的输入我无法弄清楚这一点

1 个答案: