你如何对齐标签

Question

如何对齐“记住我”框以使其显示在左侧，以便复选框应以用户名和密码文本框开头。

目前是 -

<tr>
    <td colspan="2" class="buttons">
        <label>
            <input id="rememberme" name="rememberme" value="remember" type="checkbox" />&nbsp;Remember me</label>
        <input type="submit" name="login" value="Login" />
    </td>
</tr>

Answer 1

在“记住我”文本周围添加标签并为其指定一个类;

然后给该课程以下样式：

.aux {
    float: left;
}

<tr>
    <td colspan="2" class="buttons">
        <label>
            <input id="rememberme" name="rememberme" value="remember" type="checkbox" />
            <label class="aux">&nbsp;Remember me</label>
        </label>
        <input type="submit" name="login" value="Login" />
    </td>
</tr>

这是你要找的吗？

Answer 2

您需要删除默认情况下给出的复选框边距

检查第一个

Js Fiddle

.valign{
    vertical-align: bottom;
}

input{
    margin:0;
}

Answer 3

尝试将表单插入两列表格中：

<table>
<tr>
    <td>User Name:</td>
    <td><Input type="text"/></td>
</tr>
<tr>
    <td>Password:</td>
    <td><Input type="password"/></td>
</tr>
<tr>
    <td></td>
    <td class="buttons">
        <label><input id="rememberme" name="rememberme" value="remember" type="checkbox" /> &nbsp;Remember me</label>
        <input type="submit" name="login" value="Login"/>
    </td>   
</tr>   

小提琴：http://jsfiddle.net/2wj86k32/

Answer 4

<tr><td class="buttons"><label>Username</label></td>
    <td><input id="rememberme" name="rememberme" type="text" /></td></tr>

 <tr><td class="buttons"><label>Username</label></td>
     <td><input id="rememberme" name="rememberme" type="text" /></td></tr>

   <tr><td class="buttons"></td>
       <td><input id="rememberme" name="rememberme" type="checkbox" /><label>remember me</label><input type="submit" value="Login" /></td></tr>

你需要吗？