Html 输入框与文本对齐？

如何使方框与文本对齐

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

用户名
电子邮件
暗语
评论

（限500个字符）

给你

归结起来就是：

如果您向左浮动

，
向右浮动
，则需要一个包装器来为浮动保留空间

所以我补充说：

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>


用户名

我看到您使用了
浮动
，
显示
和
宽度：100%，这里肯定有太多不必要的规则

内联块
+
宽度
，可以这样做，并允许您垂直对齐标签和输入，
浮动
+
清除
也可以工作，但是
垂直对齐
将不可用：
内联块的示例：

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

在这里做些检查，开心点！
 /*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;
}