将表单与多行标签对齐？（HTML/CSS）

我想让表单上的标签比表单中的其他标签显示在多行上的标签长得多。然后我想将输入与标签冒号上的标签对齐。 以下是当前设置的图片：

基本上，我需要release Date显示为

发布日期

（YYYY-MM-DD）：[输入框]

HTML代码：

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date (YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

---

我为你的案子修改了代码： 您可以通过向每个表单字段块的每个div包装器添加

clear:left

来解决此问题

  <div class="form-item">
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>



.form-item {
        clear: left;
}

姓名：
.表格项目{
清除：左；
}

要在冒号旁边对齐，可以使用绝对定位。下面是一个工作示例-为了让它工作，我又做了一些更改：

#歌曲形式{
利润率：20px；
}
#歌曲格式>div{
位置：相对位置；
边缘顶部：20px；
}
#歌曲格式>分区：之后{
/*Clearfix*/
内容：“；
显示：表格；
明确：两者皆有；
}
#歌曲格式>div>输入{
位置：绝对位置；
底部：0；
}
标签{
浮动：左；
宽度：250px；
清楚:对,；
}
#提交歌曲{
左边距：80px；
}

添加一首新歌
姓名：
艺术家：
专辑：
体裁：
发布日期（YYYY-MM-DD）：
BPM：

使用

显示：内联块

和

垂直对齐：底部

。无需浮动或绝对定位

#歌曲形式{
利润率：20px；
}
#歌曲格式>div{
位置：相对位置；
边缘顶部：20px；
}
标签{
显示：内联块；
宽度：250px；
垂直对齐：底部对齐；
}
#提交歌曲{
左边距：80px；
}

添加一首新歌
姓名：
艺术家：
专辑：
体裁：
发布日期（YYYY-MM-DD）：
BPM：

为什么不将“发布日期”从div中去掉，并在当前div之前的标签中添加，然后日期和输入框将按预期排列在正下方？似乎logicalOP指定他希望输入元素与标签的冒号（即最后一行）对齐，但至少在Chrome中，您的JSFIDLE显示与第一行对齐的输入元素。您应该避免使用额外的HTML元素来清除浮点数。您应该使用更现代的解决方案：

  <div class="form-item">
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>



.form-item {
        clear: left;
}