Html 如何使文本从输入框左对齐

请在此处检查结果：

问题是，在顶部我有一个选择框，因为该框比其他文本框小（而不是80%的宽度），所以它下面的文本（straatnaam en nummer）不会显示，而且正如您所看到的，所有标签都是一个向上的（就像contactpersoon在编结之前显示） 我怎样才能把每件事都做好

嗨，目前我有一个字段集：

<div id="content">
    <div id="formWrapper">
        <form id="msform">
            <fieldset id="fieldset3">
                <h2 class="fs-title">Aflevergegevens</h2>
                <h3 class="fs-subtitle">Stap 3: Aflevergegevens</h3>
                <div class="fs-error"></div> 
                <label for="locationLabel">Locatie</label>
                <select  name="locations">
                    <option>test</option>
                </select>
                <label for="addressLabel" style="float:left;">Straatnaam en nummer</label><input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />
                <label for="postalCodeLabel">Postcode</label><input type="text" name="postalCode" id="postalCode" placeholder="Postcode" />
                <label for="placeLabel">Plaats</label><input type="text" name="place" id="place" placeholder="Plaats" />
                <label for="contactPersonLabel">Contactpersoon</label><input type="text" name="contactPerson" id="contactPerson" placeholder="Contactpersoon" />
                <br/>
                <input type="button" name="previous" class="previous action-button" value="Vorige" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />   
                <h2>JSON</h2>
                <pre id="result">
                </pre>
            </fieldset>
        </form>
    </div>
</div>

永恒的
Stap 3:AFlevergevens
地点
测试
努默斯特拉特纳姆酒店
邮政编码
普拉茨
接触器


JSON

请在此处检查结果：

问题是，在顶部我有一个选择框，因为该框比其他文本框小（而不是80%的宽度），所以它下面的文本（straatnaam en nummer）不会显示，而且正如您所看到的，所有标签都是一个向上的（就像contactpersoon在编结之前显示）

---

我怎样才能把每件事都做好

我更新了小提琴以解决您的一些问题：

代码示例：

<div class="wrapper">
    <label for="address" style="float:left;">Straat/No</label>
    <input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />
</div>

#fieldset1 label,#fieldset3 label
{
    width:20%;
    float:left;
    line-height:45px;
}

斯特拉特/否
#字段集1标签，#字段集3标签
{
宽度：20%；
浮动：左；
线高：45px；
}

更改：

<div class="wrapper">
    <label for="address" style="float:left;">Straat/No</label>
    <input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />
</div>

#fieldset1 label,#fieldset3 label
{
    width:20%;
    float:left;
    line-height:45px;
}

• 围绕元素的包装
• 更正了标签（必须与输入/选择一样精确）
• 标签的线条高度（将垂直居中）
• 输入/选择的填充/边距和字体
• 缩短标签

编辑： 我重新构造了代码以使用更少的div包装器：

---

由于过去大量滥用，人们对使用表格格式化HTML组件存在反感，但问题仍然存在：如果您想将某些内容格式化为表格，那么就使用表格

因此，我的解决方案（加上一些使输入和选择元素更加统一的修改）：

如果你真的（真的）轻视表格，你可以使用块（比如

）来包装每一行（意思是：输入字段和相关标签），给标签一个固定的宽度，给输入字段一个剩余的宽度来模拟两个可视列

更好的是，您可以在每行末尾用一个标记替换行-

，然后为所有标签指定相同的固定宽度，并再次为输入字段指定剩余的线宽

/*自定义字体*/
@导入url(http://fonts.googleapis.com/css?family=Montserrat);
/*基本重置*/
* {
保证金：0；
填充：0；
}
#包装纸{
最小高度：494px；
}
#黑德{
字体家族：乔治亚！重要；
背景色：#F5；
边框：1px实心#e3；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.05）；
-moz盒阴影：插入0 1px 1px rgba（0,0,0,0.05）；
盒影：插入0 1px 1px rgba（0,0,0,0.05）；
文本对齐：居中；
字体系列：格鲁吉亚；
位置：固定；
顶部：0px；
宽度：100%；
填充：20px；
}
/*表单样式*/
#msform{
/*表格的字体*/
字体系列：蒙特塞拉特、arial、verdana；
宽度：800px；
保证金：50px自动；
/*文本对齐：居中*/
/*----------------------->1*/
位置：相对位置；
}
#msform select{
/*浮动：左*/
宽度：100px；
右边距：10px；
高度：29px；
}
#托杜{
字号：7pt；
颜色：红色；
左侧填充：65px；
-webkit填充开始：55px；
}
#todu2{
字号：7pt；
颜色：红色；
左侧填充：65px；
-webkit填充开始：105px；
}
#msform字段集{
背景：白色；
边界：0无；
边界半径：3px；
盒影：0.15px 1px rgba（0,0,0,0.4）；
填充：20px 30px；
框大小：边框框；
宽度：80%；
利润率：0.10%；
/*----------------------->2*/
位置：绝对位置；
}
/*隐藏除第一个字段集以外的所有字段集*/
#msform字段集：非（：类型的第一个）{
显示：无；
}
#fieldset3表{
宽度：100%；
}
#fieldset3表td{
边缘底部：10px；
}
#fieldset3表td：第一个孩子{
宽度：40%；
文本对齐：右对齐；
右侧填充：1em；
}
#fieldset3表td输入，
#fieldset3表td选择{
宽度：100%；
}
#fieldset1标签，
#字段集3标签{
宽度：20%；
/*浮动：左*/
边缘顶部：10px；
}
/*投入*/
#msform输入，
#msform textarea，
#msform select{
填充：15px；
边框：1px实心#ccc；
边界半径：2px；
边缘底部：10px；
宽度：80%；
高度：45px；
框大小：边框框；
字体系列：蒙特塞拉特；
颜色：#2C3E50；
字体大小：12px；
}
#msform文本区{
最小高度：110px；
左边距：50像素；
}
#bijlageTD输入[type=“file”]{
高度：自动；
宽度：自动；
边界：0px；
左侧填充：60px；
-webkit填充开始：150px；
}
/*钮扣*/
#msform.action按钮{
宽度：100px；
背景：#27AE60；
字体大小：13px；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充物：5px 5px；
利润率：10px 5px；
}
#操作按钮：悬停，
#动作按钮：焦点{
盒影：0 2倍白色，0 0 3倍#27AE60；
}
#msform.tableProgressFormTextArea{
高度：110px；
}
.表格{
明确：两者皆有；
}
/*标题*/
.fs标题{
字体大小：15px；
文本转换：大写；
颜色：#2C3E50；
边缘底部：10px；
}
.fs副标题{
字体大小：正常；
字体大小：13px；
颜色：#666；
右边距：30px；
边缘底部：20px；
}
/*进度条*/
#进度条{
边缘底部：30px；
溢出：隐藏；
/*CSS计数器对步骤进行编号*/
计数器复位：步骤；
}
#李国宝{
列表样式类型：无；
颜色：rgb（0,0,0）；
文本转换：大写；
字体大小：11px；
宽度：33.33%；
浮动：左；
位置：相对位置；
}
#李：以前{
内容：计数器（步骤）；
反增量