Variable-width inline underline effects in CSS

Posted by sidereal on Stack Overflow See other posts from Stack Overflow or by sidereal
Published on 2010-05-11T22:48:25Z Indexed on 2010/05/11 22:54 UTC
Read the original article Hit count: 469

Filed under:
|

I need to simulate the look of a typical paper form in CSS. It consists of a two-column table of fields. Each field consists of a field name (of variable width) followed by an underline that continues to the end of the column. The field might be populated, in which case there is some text centered above the line, or it may be blank. If that isn't clear, he's a rough idea in manky ASCII art:

Name: _______Foo_______  Age: _____17______
Location: __Melbourne__  Handedness: _Left_

(except that the underline would continue under any text)

To implement the underline without text, I assume I should use a border-bottom rather than a text-decoration: underline. Additionally, I need the bordered element to take up the full available space. Both of those argue for a block-level element. However, I can't find any way to get the block level element (either a div, an li, or a span set to display: block or inline-block) to remain on the same line as the label. As soon as I give it a width: 100%, it newlines. I've tried various combinations of floats, and I'm not inclined to do anything ridiculous with absolute positioning. Any recommendations?

© Stack Overflow or respective owner

Related posts about css

Related posts about css-positioning