html - 输入框与文本对齐？

Question

如何让我的框与我的文本对齐？

我还复制并粘贴了 jsFiddle 中的 html/css 代码!

http://jsfiddle.net/EFByC/51/

<form 
  action="http://www.sblogger/cgi-bin/subcomments"
  method="post" >

<fieldset name="commentFS" id="commentFS">

    <label for="username">Username</label>
    <input name="username" id="username" title="Supply your username" required="required"/>

    <label for="email">E-mail</label>
    <input name="email" id="email" type="email" title="Supply a valid e-mail address" required="required"/>

    <label for="password">Password</label>
    <input name="password" id="password" type="password" title="You must provide your password" required="required"/>

    <label for="commentbox">Comment<br />
            (500 character limit)</label>
    <textarea maxlength="500" name="commentbox" id="commentbox"></textarea> 


    <input type="submit" value="Submit Comment"/>  
</fieldset>
</form>

Answer 1

给你，edited your Fiddle

归结为:

如果您 float left & right，您需要一个包装器来为 float 保留空间。

所以我添加了这个:

p {
    overflow: hidden;/*this should be clearfix, just for demo it is overflow fix*/
}

label{
    display: block;
    float: left;
    font-size: 0.9em;
    width: 20%;/* was 100%*/
    margin-top: 5px;
    margin-bottom: 5px;
    /*clear: left*/
}

和包装器:

<p>
 <label for="username">Username</label>
 <input name="username" id="username" title="Supply your username" required="required">
</p>