Skip to content

Instantly share code, notes, and snippets.

@airen
Created August 3, 2015 02:19
Show Gist options
  • Save airen/36fc8e33fa4f7d457a80 to your computer and use it in GitHub Desktop.
Save airen/36fc8e33fa4f7d457a80 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul>
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
</ul>
// ----
// libsass (v3.2.5)
// ----
%text-align-justify-trick {
font-size: 0.1px;
text-align: justify;
&:after {
display:inline-block;
content: '';
width: 100%;
}
> * {
display:inline-block;
font-size: 16px;
}
}
ul{
margin: 0;
padding: 0;
list-style: none outside none;
@extend %text-align-justify-trick;
div {
width: 300px;
height: 150px;
line-height: 150px;
font-size: 2em;
text-align: center;
background: orange;
margin-bottom: 20px;
}
}
ul {
font-size: 0.1px;
text-align: justify;
}
ul:after {
display: inline-block;
content: '';
width: 100%;
}
ul > * {
display: inline-block;
font-size: 16px;
}
ul {
margin: 0;
padding: 0;
list-style: none outside none;
}
ul div {
width: 300px;
height: 150px;
line-height: 150px;
font-size: 2em;
text-align: center;
background: orange;
margin-bottom: 20px;
}
<ul>
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment