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

什么是适当的css方法来完成以下操作，因此与文本输入字段沿着其左侧垂直排列的例外情况相同？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; 
}

来源

2011-04-16 Kyle Brandt

为什么不只是使用负边距？

.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>

来源

2011-04-16 14:07:03 Potherca

我会做这样的事;

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

然后给div的class'label'设置一个默认宽度，并将它们浮动到eachother旁边。

编辑：看到你改变了你的文章;

<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; 
}

来源

2011-04-16 13:52:46 Rob

会在哪里复选框走在这个例子吗？ – 2011-04-16 13:55:54

@kyle如果你愿意，你可以把它放在'div.field'中，或者你可以在字段的上方或下方创建一个'行'，将标签留空并将复选框放在字段div中。取决于您的预期用法 – Rob 2011-04-16 14:00:12

为什么要添加一个div而不是只针对元素本身？ – Potherca 2011-04-16 14:25:32

执行此操作。

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标记：

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;}

然后宽度添加到您的形式，这取决于输入的大小，用你的复选框，静静地飘浮它之间，以及用利润。

来源

2011-04-16 13:52:47 Basic

但是，如果用户具有更大/更小的字体，或不同大小的控件（例如复选框），那么这些精心设计的像素值会不会停止工作？ – 9000 2011-04-16 14:12:52

然后为所有文本相关的CSS设置值为em。对于复选框，页边距仍然可以以px显示，因为它的位置要相对于它在所选输入字段旁边浮动的位置固定。 – Basic 2011-04-16 14:15:27

-1

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

来源

2011-04-16 13:55:40 9000

用css更容易。 – Basic 2011-04-16 13:57:51

我总是学会不使用表格进行造型。仅用于数据表示。 – Rob 2011-04-16 13:58:09

@basic：这取决于;原始海报确实要求如何使用无表格CSS来做到这一点，而使用表格则很简单。桌子也是完全可CSS的。此外，请在这里按Ctrl + U（或以其他方式调用View Source）。 – 9000 2011-04-16 14:09:55

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

回答

相关问题