CSS question: How can I code an inline variable length horizontal line?

[seiyaku]

Simple requirement, so I'm sure there ain't a simple answer...

I'm wanting to display a horizontal line, like you might see on an
application form

FIRST NAME _________ FAMILY NAME ________

(Note: This is NOT an input form on the screen; just looks like one)

I could insert a single-celled table with a bottom border, but I'd
probably get arrested.

I thought <hr> might be the answer, but that seems to throw a line
break before and after. As does a <DIV>. No good.

So what I'm using is <span
style="text-decoration:underline;letter-spacing:50px;">&nbsp;&nbsp;</span>;...
using .class of course and having a different .class for each length I
want to display. It works, but the coding looks embarassingly daft.

There's an example on my page at
http://www.apsresp.org/congress/1993.html (scroll to the bottom of the
page)

What's a more elegant / standard CSS way to do what I'm trying to do?

Many thanks

 

[Harlan Messinger]

Simple requirement, so I'm sure there ain't a simple answer...

I'm wanting to display a horizontal line, like you might see on an
application form

FIRST NAME _________ FAMILY NAME ________

(Note: This is NOT an input form on the screen; just looks like one)

What about the old-fashioned way: a sequence of underscores?

 

[Andy Dingley]

Simple requirement, so I'm sure there ain't a simple answer...



I'm wanting to display a horizontal line, like you might see on an
application form

FIRST NAME _________ FAMILY NAME ________

Easy:

#txtFirstName,
#txtFamilyName {
border: none;
border-bottom: thin solid;
padding: 0;
padding-bottom: 0.12em;
}

So what I'm using is <span
style="text-decoration:underline;letter-spacing:50px;">&nbsp;&nbsp;</span>;...

Hmmm..... Apart from using em units instead of pixels that's not such a
bad solution!

The problem is that CSS doesn't like to set width on inline elements
and it doesn't let you sit them on the same line unless they are
inline. So what's to be done?

The "obvious" and "neat" solution is to use display: inline-block;
http://www.w3.org/TR/CSS21/visuren.html#display-prop
Unfortunately this is a CSS2.1 feature, so probably isn't deployable
today.

Back in the real world, then I don't know how to make it work with
<span> and to control the width. So instead I'd do it with <div> and
their default of display:block; This makes setting the width trivial.
#txtFirstName { width: 12em; }

To get them all on the same line I'd then use float:left; Remember to
clear afterwards.


Float is a whole new can of worms! The only readable guide I know of
is here:
http://brainjar.com/css/positioning/

 

[seiyaku]

Wooaoooh! - thanks Andy, I'll go with your advice.

(You could tell I'm a newbie and replied in simple language, so thanks
for that too!)

John