Databases
StackOverflow2013
Postsdbo
POHow to make last element in a series of wrapped inline-block elements fill the available horizontal space?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make last element in a series of wrapped inline-block elements fill the available horizontal space?
    text
    copied!<p>I have an element which will contain an unspecified number of inline-block elements which may wrap if there are enough elements.</p> <p>I want the last element to fill the remaining space on the line. How can this be accomplished?</p> <p><img src="https://i.stack.imgur.com/n3gd5.png" alt="enter image description here"></p> <p><img src="https://i.stack.imgur.com/is7WK.png" alt="enter image description here"></p> <p><img src="https://i.stack.imgur.com/Nvquh.png" alt="enter image description here"></p> <p>Example HTML</p> <pre><code>&lt;div class="tags"&gt; &lt;span class="tags__item"&gt;First Tag&lt;/span&gt; &lt;span class="tags__item"&gt;Another One&lt;/span&gt; &lt;span class="tags__item"&gt;Long Tag Name Here&lt;/span&gt; &lt;span class="tags__item"&gt;Last tag should fill&lt;/span&gt; &lt;/div&gt; </code></pre> <p>Example CSS</p> <pre><code>.tags { border: solid 1px #000; padding: 0; } .tags__item { display: inline-block; margin: 2px; padding: 1px 5px; background: #eee; border: solid 1px #eee; } .tags__item:last-child { background: #fff; border: dashed 1px #eee; } </code></pre> <h2>Attempt #1 (doesn't work)</h2> <p>One answer (which was deleted) mentioned trying table-cell layout like this..</p> <pre><code>.tags { border: solid 1px #000; display: table-row; white-space: nowrap; } .tags__item { display:table-cell; width:auto; margin: 2px; padding: 1px 5px; background: #eee; } .tags__item:last-child { background: #fff; border: dashed 1px #ccc; width:99% } </code></pre> <p>This solution works reasonably well for a single line. However, it doesn't allow wrapping. <a href="http://cdpn.io/omFuy" rel="nofollow noreferrer">http://cdpn.io/omFuy</a></p> <h2>Attempt #2 (doesn't work)</h2> <p>Someone else linked to another <a href="https://stackoverflow.com/questions/10220142/is-it-possible-for-inline-block-element-to-auto-fill-the-available-width">SO answer</a> as a possible solution.</p> <pre><code>.tags { border: solid 1px #000; } .tags__item { display: block; float: left; margin: 2px; padding: 1px 5px; background: #eee; } .tags__item:last-child { float: none; display: block; border: dashed 1px #ccc; background: #fff; } .tags__item:last-child::after { clear:both; } </code></pre> <p>But it doesn't work. <a href="http://codepen.io/jessegavin/pen/oEyIF" rel="nofollow noreferrer">See my implementation</a>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload