Question

如何让我的盒子与我的文字保持一致？

我还在jsFiddle中复制并粘贴了html / css代码！

<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

归结为：

如果你漂浮left＆amp; right，你需要一个包装来保留花车的空间。

所以我补充说：

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>

Answer 2

我看到您使用float，display和width:100%;，这里肯定会有太多不必要的规则。

inline-block + width，可以执行此操作并允许您vertiacal-align标签和输入， float + clear也可以使用，但vertical-align不可用：使用内联块的示例：

 /*Field set styles */ 
fieldset { 
    background-color: rgb(245,245,255);
    margin: 15px auto;
    padding: 5px;
    width: 90%;
}
/* Label Styles */  
label{
    display: inline-block;
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 5px;
    width:35%;
}
/*Input control styles */   
input, textarea { 
    font-size: 0.9em;
    margin-left: 10px;
    margin-right: 10px;
    width: 55%;
    vertical-align:middle;
}
/*Text area styles */

textarea {
    height: 150px;
}

http://jsfiddle.net/EFByC/58/

输入框与文本对齐？

2 个答案: