将边距扩展到未知宽度

Question

I have some text elements displayed as inline-block and each has a fixed amount of padding , say 10 pixels. All of these text elements are centered by text-align inside of a container of unknown width. Here is a JSFiddle as an example: http://jsfiddle.net/fhtkLwak/5/

HTML :

<div class="outer">
    <div class="inner">
        <span style="background:#0f0;">A</span>
        <span style="background:#00f;">B</span>
        <span style="background:#ff0;">C</span>
        <span style="background:#0ff;">D</span>
        <span style="background:#f0f;">E</span>
    </div>
</div>

CSS :

.outer {width:500px;}
.inner {
    background:#f00;
    font-size:0; /* To avoid white space width */
    text-align:center;
}
.inner span {
    display:inline-block;
    font-size:20px;
    padding:10px;
}

What I would like is that the first element's background / padding extends as far to the left as possible and the last element's background / padding extends as far to the right as possible. If it can be done without padding that is fine, just as long as the background has the described behavior.

Answer 1

If you don't mind sacrificing some browser support, CSS flexbox is the easiest way to go: http://jsfiddle.net/teddyrised/fhtkLwak/9/

The main advantage of this method is that it does not require explicitly setting the width of .outer , so it is flexible (hence the name flex display):

.outer {width:500px;}
.inner {
    background:#f00;
    display: flex;
    justify-content: center;
}
.inner span {
    display: block;
    font-size:20px;
    padding:10px;
}
.inner span:first-child,
.inner span:last-child {
    flex-grow: 1;
}
.inner span:first-child {
    text-align: right;
}

You will need to add appropriate vendor prefixes to the flex properties to enable cross-browser support.

What we are doing here is basically give the parent element, .inner , a flex display property. This allows us to fine tune the dimensions of its <span> children. Since you only want the first and last child to grow to fill all remaining space, we allow them to grow to fill all available space flex-grow: 1 (default is flex-grow: 0 ), and then set the text alignment on the first child to the right to achieve the desired text alignment.

For a comprehensive guide to CSS flexbox, you can check out the guide published by Chris Coyier .

---

Update : If CSS flexbox support is lacking in the browser of your target audience, you can consider setting a background gradient instead. The trick is that you will set a two-tone background that is parted in the middle, where the left colour corresponds to the left-most <span> the right colour corresponds to the right-most counterpart.

Again, the advantage of this method is that it does not require the width of .outer to be explicitly stated. The major drawback, however, is that the background colour of the first and last span has to be known, and static, otherwise you will have to rely on JS to sniff out the (dynamic) background colour and create new background gradients on the fly.

.outer {
    width:500px;
    background-image: linear-gradient(90deg, #0f0 0%, #0f0 50%, #f0f 50%, #f0f 100%);
}

This solution is less invasive in the sense that all your code has been preserved, and I have only added the background-image declaration :)

http://jsfiddle.net/teddyrised/fhtkLwak/11/

Answer 2

Actually there are couple of ways to achieve that, I'm sure about 3 of them at least at the moment.

Flexbox is not supported on IE9 and older, and CSS tables also have their own cons, ... However without altering the current method (ie keep using inline-block s) you could fake the effect by adding a background-color and border-right to the container:

Example Here

.outer {
    width:250px;
    background-color: #0f0;         /* equal to background color of the first item */
    border-right: 250px solid #f0f; /* equal to background color of the last item */
}

.inner {
    margin-right: -250px;
    font-size:0; /* To avoid white space width */
    text-align:center;
}

---

Having vary width

If the container doesn't have an explicit width, you can still achieve the goal by using inline-block s.

And ff course that we can achieve that by CSS Gradients as @Terry mentioned, but for the sake of browser support I'd go with background colors.

In this case instead of adding border-right to the .outer we can give the .inner a background-color as well, and finally align the items to the center by relative positioning and giving them a right of -50% as follows:

Updated Demo

.outer {
    /* width: 90%; */        /* Arbitrary */
    background-color: #f0f;  /* equal to background color of the last item */
}

.inner {
    background-color: #0f0; /* equal to background color of the first item */
    width: 50%;
    font-size:0; /* To avoid white space width */
    text-align:center;
}

.inner span {
    display:inline-block;
    font-size:20px;
    padding:10px;

    position: relative;
    right: -50%;
}