Question

使用以下内容的正确css方法是什么，所以它是相同的，除了文本输入字段沿其左侧垂直排列？

enter image description here

因此，复选框仍然会对着输入字段以及标签和输入字段之间，但输入字段仍然亮起。

当前HTML：

<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>

当前的CSS：

label {
        font-size: 90%;
        float:left;
        width: 15em;
}

Answer 1

为什么不使用负保证金？

.checkbox {margin-left: -16px;}

根据您的其他设置，可能需要对浏览器的像素完美性进行一些调整。

我个人可能也只是浮动标签和输入并摆脱<p>：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        label {
            display: block;
            font-size: 90%;
            width: 15em;
            clear:left;
        }

        label, input {
            float:left;
        }

        input[type=checkbox]
        /* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
        {
            margin-left: -2em;
        }

    </style>
</head>
<body>
    <form>
        <label for="search_uri">Uri:</label>
        <input id="search_uri" type="text" name="Uri" />

        <label for="search_server">Server:</label>
        <input type="checkbox" name="server_like" />
        <input id="search_server" type="text" name="Server" />

        <label for="search_host">Host:</label>
        <input id="search_host" type="text" name="Host" />
    </form>
</body>
</html>

Answer 2

我会做这样的事情;

<div class="label">Uri:</div><div class="field"><input type="text" /></div>

然后给div的类'label'一个默认宽度并将它们浮动在彼此旁边。

编辑：看到你改变了帖子;

<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />

您的CSS可能类似

label
{
    width: 150px;
    float:left;
    clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
    float:left;
}

Answer 3

这样做。

HTML标记：

<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>

Css Markup：

fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}

然后根据输入的大小为您的表单添加宽度，使用复选框，只需在其间浮动并使用边距。

Answer 4

如果您的表单很小，则可以使用<table>。

CSS标签，复选框和输入表单阵容

4 个答案: