Justified Inline Elements

HTML & CSS
1

Those are list elements that I’d love to justify and fit the width of the parent element (or the UL).

Here is the code I have:

<div style="width:92%; background-color:#F1F1F1; padding:16px 4%; margin-top:12px; position:relative; font-weight:400; font-size:16px;" id="interior">
<ul>
<li><a href="/tags/disney">Disney</a></li>
<li><a href="/tags/adventure">Adventure</a></li>
<li><a href="/tags/family">Family</a></li>
<li><a href="/tags/fantasy">Fantasy</a></li>
<li><a href="/tags/mia-wasikowska">Mia Wasikowska</a></li>
<li><a href="/tags/book">Book</a></li>
<li><a href="/tags/franchise">Franchise</a></li>
<li><a href="/tags/tv-spot">Tv Spot</a></li>
<li><a href="/tags/anne-hathaway">Anne Hathaway</a></li>
<li><a href="/tags/alan-rickman">Alan Rickman</a></li>
<li><a href="/tags/timothy-spall">Timothy Spall</a></li>
<li><a href="/tags/helena-bonham-carter">Helena Bonham Carter</a></li>
<li><a href="/tags/johnny-depp">Johnny Depp</a></li>
<li><a href="/tags/sacha-baron-cohen">Sacha Baron Cohen</a></li>
</ul>
</div>

<style>
#interior ul {
    line-height: 1.4em;
    margin-top:18px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#interior ul:before {
    content: "";
    width: 100%;
    display: block;
}
#interior ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}
#interior ul li {
    display: inline-block;
    margin:6px;
    position:relative;
    background: #FFF;
    border-radius: 2px;
    white-space: nowrap;
    padding: 8px;
}
#interior ul li a {
    color: #2e2e2e;
    font-size: 16px;
}
</style>

I would love for the inline elements to find a way to fit the width (reach both sides) no matter how many elements or their width.

Possible?
Cheers
Ryan

2

It’s flexbox that you want. :-)

CSS

#interior ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 1.4em;
  margin-top: 18px;
}

#interior ul li {
  display: block;
  margin: 6px;
  background: #FFF;
  border-radius: 2px;
  white-space: nowrap;
  padding: 8px;
}

PS: If you want the li elements not only to be evenly distributed from left to right, but to stretch so that they fill the entire width, add these two lines to their CSS:

#interior ul li {
  flex-grow: 1;
  text-align: center;
  /* etc. */
1 Like
3

Wowza. I’ve never even heard of flex. I’m so behind on all the display types. #sigh

Trying now!

4

Flexbox is definately the way to go but you can get close with inline-block so maybe could use it as the fallback for older browsers.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#interior ul {
	line-height: 1.4em;
	margin-top:18px;
	text-align: justify;
}
#interior ul:after {
	content:"\00a0";
	width: 1px;
	height:1px;
	overflow:hidden;
	display: inline-block;
	margin-right:100%;
}
#interior ul li {
	display: inline-block;
	margin:6px;
	position:relative;
	background: #FFF;
	border-radius: 2px;
	white-space: nowrap;
	padding: 8px;
}
#interior ul li a {
	color: #2e2e2e;
	font-size: 16px;
}

</style>
</head>

<body>
<div style="width:92%; background-color:#F1F1F1; padding:16px 4%; margin-top:12px; position:relative; font-weight:400; font-size:16px;" id="interior">
  <ul>
    <li><a href="/tags/disney">Disney</a></li>
    <li><a href="/tags/adventure">Adventure</a></li>
    <li><a href="/tags/family">Family</a></li>
    <li><a href="/tags/fantasy">Fantasy</a></li>
    <li><a href="/tags/mia-wasikowska">Mia Wasikowska</a></li>
    <li><a href="/tags/book">Book</a></li>
    <li><a href="/tags/franchise">Franchise</a></li>
    <li><a href="/tags/tv-spot">Tv Spot</a></li>
    <li><a href="/tags/anne-hathaway">Anne Hathaway</a></li>
    <li><a href="/tags/alan-rickman">Alan Rickman</a></li>
    <li><a href="/tags/timothy-spall">Timothy Spall</a></li>
    <li><a href="/tags/helena-bonham-carter">Helena Bonham Carter</a></li>
    <li><a href="/tags/johnny-depp">Johnny Depp</a></li>
    <li><a href="/tags/sacha-baron-cohen">Sacha Baron Cohen</a></li>
  </ul>
</div>
</body>
</html>

Unlike flexbox it won’t stretch the elements themselves but just the space between and will often leave an orphan.

5

Hey PaulOB,

I used your css to try and didn’t notice any changes in Firefox. Still dispersing the spans the same.

Cheers!
Ryan

6

You are right. Flexbox is pretty recent, especially on IE. Anyway to fallback IE10 and older IE versions in single conditional statement?

7

They are not the same as your pic in Firefox as they are now justified.

972×999 21.9 KB

As I said above the space between is increased not the element themselves unlike flexbox.

In a lot of cases you can just us flex for newer browsers and then use the fallback at the same time.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#interior ul {
	line-height: 1.4em;
	margin-top:18px;
	text-align: justify;
	-ms-text-justify: distribute-all-lines;
	text-justify: distribute-all-lines;
}
#interior ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	line-height: 1.4em;
	margin-top: 18px;
}
#interior ul li {
	display: inline-block;
	margin:6px;
	position:relative;
	background: #FFF;
	border-radius: 2px;
	white-space: nowrap;
	padding: 8px;
	flex-grow: 1;
	text-align: center;
}
#interior ul li a {
	color: #2e2e2e;
	font-size: 16px;
}
#interior ul:after {
	content:"\00a0";
	width: 1px;
	height:1px;
	overflow:hidden;
	display: inline-block;
	margin-right:100%;
}

</style>
</head>

<body>
<div style="width:92%; background-color:#F1F1F1; padding:16px 4%; margin-top:12px; position:relative; font-weight:400; font-size:16px;" id="interior">
  <ul>
    <li><a href="/tags/disney">Disney</a></li>
    <li><a href="/tags/adventure">Adventure</a></li>
    <li><a href="/tags/family">Family</a></li>
    <li><a href="/tags/fantasy">Fantasy</a></li>
    <li><a href="/tags/mia-wasikowska">Mia Wasikowska</a></li>
    <li><a href="/tags/book">Book</a></li>
    <li><a href="/tags/franchise">Franchise</a></li>
    <li><a href="/tags/tv-spot">Tv Spot</a></li>
    <li><a href="/tags/anne-hathaway">Anne Hathaway</a></li>
    <li><a href="/tags/alan-rickman">Alan Rickman</a></li>
    <li><a href="/tags/timothy-spall">Timothy Spall</a></li>
    <li><a href="/tags/helena-bonham-carter">Helena Bonham Carter</a></li>
    <li><a href="/tags/johnny-depp">Johnny Depp</a></li>
    <li><a href="/tags/sacha-baron-cohen">Sacha Baron Cohen</a></li>
  </ul>
</div>
</body>
</html>
2 Likes
8

Perfect.

I made those changes. Looks to be working and falling back.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.