Geek Answers Handbook

Aligning the base label of fields with the base text in text entries

I show text inputs next to the label text in a set of fields. I would like the source text of the text in the text inputs to match the base text of the label. I can set the tudge coefficient padding-topfor my .labelelements, but the contents of my elements .valuemay contain read-only text, and this will align the label / value alignment for these fields. I also suspect that different browsers will require different fudge coefficients due to differences in height between input fields in browsers.

Does anyone have any ideas how I can get the alignment of my labels and sources? My label text can span multiple lines, and so I would like any solution to take this into account.

You can see a live example of the following code at http://jsbin.com/enobe3 .

CSS

* {
    font-family: sans-serif;
    font-size: 13px;
}

.field {
    clear: left;
    padding-top: 5px;
}

.label {
    float: left;
    width: 90px;
}

.value {
    margin-left: 90px;
    padding-left: 10px;
}

HTML

<fieldset>
    <div class="field">
        <div class="label">A short label</div>
        <div class="value">Some text</div>
    </div>
    <div class="field">
        <div class="label">A long long long long long long long wrapping label</div>
        <div class="value">Some text</div>
    </div>
    <div class="field">
        <div class="label">A short label</div>
        <div class="value"><input value="Some text"/></div>
    </div>
    <div class="field">
        <div class="label">A long long long long long long long wrapping label</div>
        <div class="value"><input value="Some text"/></div>
    </div>
</fieldset>
+5
source share
1 answer

The baseline alignment problem is related to the default line height for text fields and input fields.

input margins are large by default for indentation, borders and text.

I experimented with your HTML / CSS code snippets and posted my version at http://jsfiddle.net/audetwebdesign/EbuJH/

, , .

line-height, , 2.0 .

.field {
    clear: left;
    padding: 5px 0;
    background-color: lightgray;
    overflow: auto;
    margin-bottom: 5px;
    line-height: 2.00; /* Key property */
}

, , .

Firefox IE8, doctype.

. , , . , , .

, , , .

+8

More articles:


All Articles