[thelist] Styling in-line elements

Lee Kowalkowski lee.kowalkowski at googlemail.com
Tue Mar 17 15:11:08 CDT 2009

2009/3/17 Jack Timmons <jorachim at gmail.com>:
> Recently I talked with my team regarding not putting positional styling on
> in-line elements, being that in-line elements are supposed to remain as
> such. After a bit of discussion today, they told me they felt that in-line
> elements should be allowed to be positioned as needed, simply to remove the
> need of additional divs. While I can understand that side of the argument,
> the standardista inside of me screams in-line should remain in-line.

This is not something I have a problem with at all.  I think I'm
inclined to agree with your team, because it does sound like those
extra DIV elements are only there for their presentational default,
i.e., presentational markup.  But it could be argued that those extra
elements allow greater flexibility when styling, because you create
more options.  This may work to your advantage if you later want to
redesign your site.

I've no idea how you're laying out forms, but the usual ways
are perfectly do-able with just a label element followed by its input
element.  I usually end up wrapping all field elements in a <div
class="field">, along with other related elements like an error
message placeholder, help icon, formatting hint, date-picker launcher,

If you use right-aligned labels so they're close to the fields and
follow the practice of using asterisks to indicate mandatory fields -
the asterisks ought to be part of the label for accessibility, so
you'll probably end up requiring block styling if you want reserve an
area down the centre of the form for the asterisks.  Not necessary,
but neater.

It's also commonplace to style links in menus as blocks to maximise
their clickable region.

It's also common to style unordered lists items as inline, for
breadcrumb trails, pagination controls, footer links, etc.


More information about the thelist mailing list