Aligning form with multilined label? (HTML/CSS)

问题

I am wanting to make a label on a form that is much longer than the other labels in the form appear on multiple lines. I then want to align the inputs to the labels on the colons of the labels. Here is a picture of the current set up:

Basically, I need Releasse Date to appear as

Release Date

(YYYY-MM-DD): [input box]

HTML Code:

<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 Code:

#songform {
margin: 20px;
}

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

input{
margin-top: 20px;
}


#songsubmit {
margin-left: 80px;
}

回答1:

Use display:inline-block and vertical-align:bottom. No floats or absolute positioning needed.

#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>

回答2:

I've made a fiddle with code for your case: http://jsfiddle.net/862xc2j1/ You can solve it with adding clear:left to each div wrapper for each form field block.

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



.form-item {
        clear: left;
}

回答3:

To get this alignment next to the colon, you can use absolute positioning. Here is a working example - I made a few more changes to get it to work:

#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>

来源：https://stackoverflow.com/questions/31734578/aligning-form-with-multilined-label-html-css