spacing display: inline elements

[Ivan Shmakov]

Is there an easy way to arrange a known number of
display: inline so that the last has its "natural" width, while
the rest of the window's width is distributed equally among the
other elements? Like:

[element 1] [elt 2] [element 3] ["natural" width for the last one]

Also, how do I ensure certain spacing between the elements? The
only way I could think of is something like (for 1em spacing):

..elt-first {
margin-left: 0;
margin-right: .5em;
}
..elt-middle {
margin-left: .5em;
margin-right: .5em;
}
..elt-last {
margin-left: .5em;
margin-right: 0;
}

However, it's mildly inconvenient, as it requires all the
elements to be explicitly tagged as "first", "middle", and
"last." Or should I be using some kind of a "spacer" element
in-between the "payload" ones?

..spacer { width: 1em; }

TIA.

 

[123Jim]

Is there an easy way to arrange a known number of
display: inline so that the last has its "natural" width, while
the rest of the window's width is distributed equally among the
other elements? Like:

[element 1] [elt 2] [element 3] ["natural" width for the last one]

Also, how do I ensure certain spacing between the elements? The
only way I could think of is something like (for 1em spacing):

.elt-first {
margin-left: 0;
margin-right: .5em;
}
.elt-middle {
margin-left: .5em;
margin-right: .5em;
}
.elt-last {
margin-left: .5em;
margin-right: 0;
}

However, it's mildly inconvenient, as it requires all the
elements to be explicitly tagged as "first", "middle", and
"last." Or should I be using some kind of a "spacer" element
in-between the "payload" ones?

.spacer { width: 1em; }

TIA.

Put them in a container <div>, apply padding to it. then use the same
margin across all of the elements contained therein.
http://www.w3.org/TR/CSS2/box.html

 

[123Jim]

Is there an easy way to arrange a known number of
display: inline so that the last has its "natural" width, while
the rest of the window's width is distributed equally among the
other elements? Like:

[element 1] [elt 2] [element 3] ["natural" width for the
last one]

Also, how do I ensure certain spacing between the elements? The
only way I could think of is something like (for 1em spacing):

.elt-first {
margin-left: 0;
margin-right: .5em;
}
.elt-middle {
margin-left: .5em;
margin-right: .5em;
}
.elt-last {
margin-left: .5em;
margin-right: 0;
}

However, it's mildly inconvenient, as it requires all the
elements to be explicitly tagged as "first", "middle", and
"last." Or should I be using some kind of a "spacer" element
in-between the "payload" ones?

.spacer { width: 1em; }

TIA.

Put them in a container <div>, apply padding to it. then use the same
margin across all of the elements contained therein.
http://www.w3.org/TR/CSS2/box.html

In respect of the last element having a natural width you can do
something with max-width but again apply it to all your boxes, as you
won't know which box would be the right most box due to the variability
of Browser window width.

 

[dorayme]

Is there an easy way to arrange a known number of
display: inline so that the last has its "natural" width, while
the rest of the window's width is distributed equally among the
other elements? Like:

[element 1] [elt 2] [element 3] ["natural" width for the last one]

What is a *natural* width for something (an element perhaps) that goes
inline? An image that is natively 200px wide perhaps? An anonymous box
of text? A span? A floated div with normal shrink-to-fit property?

Anyway, if the three (or other number) of elements are to be spaced
evenly (and not according to their "natural" width?), then perhaps
best to make a container for these three, margin or padding the
contents evenly (padding-right for all but the last of the children),
float the container itself left, if it is a DIV say, to get the
shrink-to-fit effect and then add the last inline element. If the
first three are not to be their natural width, what are you
contemplating, that they be given an unnatural width?

Remember that the browser viewport might not be wide enough to allow
what you are aiming for, the last element (or indeed, other elements
unless you make special provisions) can drop and wrap.

Also, how do I ensure certain spacing between the elements? The
only way I could think of is something like (for 1em spacing):

.elt-first {
margin-left: 0;
margin-right: .5em;
}
.elt-middle {
margin-left: .5em;
margin-right: .5em;
}
.elt-last {
margin-left: .5em;
margin-right: 0;
}

If you have three elements, there are other ways to target them
without creating classes for all. For example, if there are three
SPANS in a DIV (and no other DIV has spans), you can just class the
last and

div span {margin-right: .5em;}
div .last {margin-right: 0;}

However, it's mildly inconvenient, as it requires all the
elements to be explicitly tagged as "first", "middle", and
"last." Or should I be using some kind of a "spacer" element
in-between the "payload" ones?

.spacer { width: 1em; }

Don't do this last, it is too inelegant.

Above all, how about a real URL with some real markup and example so
we can see what you might be doing?

 

[Ivan Shmakov]

[...]

Remember that the browser viewport might not be wide enough to allow
what you are aiming for, the last element (or indeed, other elements
unless you make special provisions) can drop and wrap.

Yes. I find it acceptable, though.

[...]

If you have three elements, there are other ways to target them
without creating classes for all. For example, if there are three
SPANS in a DIV (and no other DIV has spans), you can just class the
last and

div span {margin-right: .5em;}
div .last {margin-right: 0;}

Indeed, that's much better. Thanks!

(Still, I'd prefer not to add any special classes just for a
purpose like this. As in: given two adjacent margins, the
largest would "magically win" and be used instead of both.)

BTW, there's a similar problem for display: block elements, and
margin-top:, margin-bottom:. I guess a solution like the above
will fit this case, too.

[...]

Above all, how about a real URL with some real markup and example so
we can see what you might be doing?

Not at this moment.

 

[dorayme]

dorayme <[email protected]> writes:

[...]

If you have three elements, there are other ways to target them
without creating classes for all. For example, if there are three
SPANS in a DIV (and no other DIV has spans), you can just class the
last and

div span {margin-right: .5em;}
div .last {margin-right: 0;}

Indeed, that's much better. Thanks!

(Still, I'd prefer not to add any special classes just for a
purpose like this. As in: given two adjacent margins, the
largest would "magically win" and be used instead of both.)
[/QUOTE]

Depending on your exact situation, you can even do without any
classing. For example if there is an element with three sibling spans
inside like

<div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>

you can target all of them with styles by using adjacent sibling
selecting

span {padding-right: 5em;}
span+span+span {padding-right: 0;}

 

[Ivan Shmakov]

[...]

Indeed, that's much better. Thanks!
(Still, I'd prefer not to add any special classes just for a purpose
like this. As in: given two adjacent margins, the largest would
"magically win" and be used instead of both.)

Depending on your exact situation, you can even do without any
classing. For example if there is an element with three sibling
spans inside like

you can target all of them with styles by using adjacent sibling
selecting

span {padding-right: 5em;}
span+span+span {padding-right: 0;}

Unfortunately, I may have several contexts like that, each
having different number of children.

However, I've found that CSS3 adds a number of what they call
"structural pseudo-classes" [1], including :last-child (CSS2
already had :first-child), :first-of-type, and :last-of-type.

Thus, my .css now reads:

..login-form > p,
..update-type > p {
display: inline;
margin-left: .71ex;
margin-right: .71ex;
padding: 0;
}

..login-form > p:first-of-type,
..update-type > p:first-of-type {
margin-left: 0;
}

..login-form > p:last-of-type,
..update-type > p:last-of-type {
margin-right: 0;
}

Now, it makes me wonder how widely these pseudo-classes are
implemented nowadays? (Then, however, I've used a few of the
HTML5 elements just as well...)

[1] http://www.w3.org/TR/css3-selectors/#structural-pseudos

Curiously enough, this is exactly how top and bottom margins
appear to work in my Firefox (or, rather, Iceweasel, as of
10.0.12esr debian 1.) Still, it may be necessary to amend the
margins of the topmost and bottommost elements. Like, e. g.:

article > *, body > * {
margin-top: 3.14ex;
margin-bottom: 3.14ex;
}

article > :first-child, body > :first-child {
margin-top: 0;
}

article > :last-child, body > :last-child {
margin-bottom: 0;
}

 

[dorayme]

dorayme <[email protected]> writes:

[...]


you can target all of them with styles by using adjacent sibling
selecting

span {padding-right: 5em;}
span+span+span {padding-right: 0;}

Unfortunately, I may have several contexts like that, each
having different number of children.

However, I've found that CSS3 adds a number of what they call
"structural pseudo-classes" [1], including :last-child (CSS2
already had :first-child), :first-of-type, and :last-of-type.
[/QUOTE]
Good point. But check to see how IE handles such (IE8 and below are
not likely to)

Now, it makes me wonder how widely these pseudo-classes are
implemented nowadays? (Then, however, I've used a few of the
HTML5 elements just as well...)

[1] http://www.w3.org/TR/css3-selectors/#structural-pseudos

 

[Gus Richter]

Now, it makes me wonder how widely these pseudo-classes are
implemented nowadays?

<http://caniuse.com/#search=css3 selectors>

 

[Ivan Shmakov]

[...]

However, I've found that CSS3 adds a number of what they call
"structural pseudo-classes" [1], including :last-child (CSS2 already
had :first-child), :first-of-type, and :last-of-type.

Good point. But check to see how IE handles such (IE8 and below are
not likely to)

Neither these support XML-based HTML (application/xhtml+xml),
which I also happen to use.

Perhaps I will implement some hacks to get around these issues
(first and foremost the XHTML vs. XML one), but given that the
pages in question are, to some extent, oriented at "network
professionals," I'd expect that the majority of those interested
will use a more standards-compliant Web agent, anyway.

Now, it makes me wonder how widely these pseudo-classes are
implemented nowadays? (Then, however, I've used a few of the HTML5
elements just as well...)
[1] http://www.w3.org/TR/css3-selectors/#structural-pseudos

 

[Ivan Shmakov]

<http://caniuse.com/#search=css3 selectors>

Looks good. Thanks!