Form Styling with SPAN text instead of input or select controls

Question

I've got CSS that formats labels above form input elements and I'd like to replace the input elements with text from the database if I'm just displaying read-only data.

No matter what I do, changing the input fields to a span or asp:label will not properly render the label above the text.

I'm using this CSS:

div.formRow {
   padding: 2px 0px;
}

span.formItem {
    display: inline-block;
    position: relative;
    padding: 0px 5px;
}
span.formItem label {
    position: absolute;
    left: 5px;
    top: 0px;
}
span.formItem input, span.formItem select {
    margin-top: 20px;
}

Answer 1

I'm guessing you need to add display: block to the input field replacement spans.