Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have a series of radio buttons with a "label" to the right. I don't
want the label to break from the radio button when the line wraps and I
want each label/button pair to take the same space.

Something like this comes to mind:

nobr{width: 8em}

<nobr><input type="radio" ...> $5.00</nobr>

Seems to me that nobr never made it into and html specs, or am I wrong?

Also, is it OK to specify widths, horizontal margins and padding for
inline elements?

Better way?

this also comes to mind:
<span><input type="radio" ...>&nbsp;$5.00</span>


Re: nobr

Quoted text here. Click to load it

How about <label> ? It was designed for the purpose of markin up form
control labels. Seems to be exactly what you're doing.


"My theories appal you, my heresies outrage you,
 I never answer letters and you don't like my tie."  - The Doctor

Re: nobr

Steve Pugh wrote:

Quoted text here. Click to load it

It's useful for other purposes, but it doesn't prevent line breaks.

For a set of radio buttons, the structured way is something like

<legend>Select the amount of donation</legend>
<div><input id="a1" type="radio" ...> <label for="a1">$5.00</label></div>
<div><input id="a2" type="radio" ...> <label for="a2">$6.00</label></div>
<div><input id="a3" type="radio" ...> <label for="a3">$7.00</label></div>

Then you can set
fieldset { white-space: nowrap; }

It would suffice to use &nbsp; instead of a space, but in a general
case, the label text could contain several spaces, making this
impractical, or hyphens, making this insufficient.

As regards to making the fields fit into, say, 8em, the best approach is
to avoid creating such problems. Put a form on a page of its own where
it can occupy the entire available width.

Re: nobr

Jeff wrote:
Quoted text here. Click to load it
  This makes no sense. <nobr> is a directive to prevent line wrapping. It
has no dimensions, just as <br> or <em> has no dimensions.
  As others have mentioned, a <fieldset> and <label>s look like what you
should be using.

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: nobr

nobr will not validate. use CSS white-space:nowrap;

Site Timeline