将表格与多线标签对齐？ （HTML / CSS）

Question

我想在一个表格上做一个标签，这个表格比表格中的其他标签长得多。然后我想将输入与标签的冒号上的标签对齐。 这是当前设置的图片：

基本上，我需要将Releasse 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>

CSS代码：

#songform {
margin: 20px;
}

label {
float: left;
width: 250px;
margin-top: 20px;
clear: right;
}

input{
margin-top: 20px;
}


#songsubmit {
margin-left: 80px;
}

Answer 1

使用display:inline-block和vertical-align:bottom。不需要花车或绝对定位。

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}




label {
    display:inline-block;
    width: 250px;
    vertical-align:bottom;
}

#songsubmit {
    margin-left: 80px;
}

<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<br>(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>

Answer 2

我为你的案子制作了代码：http://jsfiddle.net/862xc2j1/ 您可以通过为每个表单字段块的每个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;
}

Answer 3

要在冒号旁边进行此对齐，可以使用绝对定位。这是一个工作示例 - 我做了一些更改以使其工作：

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}

#songform > div:after {
  /* Clearfix */
  content:"";
  display:table;
  clear:both;
}

#songform > div > input {
    position: absolute;
    bottom: 0;
}

label {
    float: left;
    width: 250px;
    clear: right;
}

#songsubmit {
    margin-left: 80px;
}

<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<br>(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>