html - 我想设计我的表格，如图所示

Question

我希望我的表格看起来像图像中使用 CSS 的表格。有没有办法做到这一点，因为我尽我所能尝试但没有奏效。非常感谢您的帮助。

这是我的 HTML 代码

<div id="login_fields"> 
    <form id="login_form">
        <table>
          <tr>
            <td>User</td>
            <td><input type="text" name="user" id="user" /></td>
          </tr>
          <tr>
            <td>Password</td>
            <td><input type="password" name="password" id="password" /></td>
          </tr>
        </table>
    </form>
</div>

Answer 1

我可以建议修改您的 HTML(表格 完全没有必要)，如下所示:

<form action="#" method="post">
    <!-- using a label means that clicking the text automatically focuses
         the relevant input, the value of the 'for' attribute must match the 'id'
         of the relevant input though -->
    <label for="uName">User</label>
    <input id="uName" />
    <label for="pass">Password</label>
    <input type="password" id="pass" />
</form>

使用以下 CSS(根据喜好修改颜色和尺寸):

form {
    /* aesthetics, just to move the label/input pairs from the edge of the screen */
    padding: 1em;
}

label,
input {
    float: left; /* to allow for width to be given, and for clearing */
    border: 1px solid #999; /* amend the following as required */
    line-height: 1.2em;
    padding: 0.2em 0;
    font-size: 1em;
    height: 1.4em;
    margin-bottom: 0.8em;
}

input + label {
    clear: left; /* this styles a label element that immediately
                    follows an input, and forces a new-line */
}

label {
    text-indent: 0.5em; /* moves the text away from the curved corners */
    width: 30%;
    border-radius: 0.5em 0 0 0.5em; /* handles the curved corners */
}

input {
    width: 60%;
    border-radius: 0 0.5em 0.5em 0;
    outline: none;
}

input:focus,
input:active {
    box-shadow: inset 0 0 5px #55f; /* compensates for the fact I removed the
                                       default outline, and gives visual
                                       feedback to show the input is focused/active */
}

JS Fiddle demo .