A Pen by Paul Demers.

A-Pen-by-Paul-Demers.markdown

A Pen by Paul Demers

A Pen by Paul Demers on CodePen.

License.

index.html

<h1>Using <pre><code>inline=block</code></pre> to create horizontal navigational lists</h1>
<h2>Method 1 - Remove spaces in HTML elements</h2>
<ul class="noSpaces">
  <li>Inline Block 1</li><li>Inline Block 2</li><li>Inline Block 3</li><li>Inline Block 4</li><li>Inline Block 5</li>
</ul>

<h2>Method 2 - Comments between HTML elements</h2>
<ul class="noSpaces">
  <li>Inline Block 1</li><!--
--><li>Inline Block 2</li><!--
--><li>Inline Block 3</li><!--
--><li>Inline Block 4</li><!--
--><li>Inline Block 5</li>
</ul>

<h2>Method 3 - Set font size on block element to zero</h2>
<ul class="fontSize">
  <li>Inline Block 1</li>
  <li>Inline Block 2</li>
  <li>Inline Block 3</li>
  <li>Inline Block 4</li>
  <li>Inline Block 5</li>
</ul>

<p>Methods 2 &amp; 3 inspired by <a href="http://webdesigner-webdeveloper.com/weblog/about-inline-blocks">About inline-blocks</a> by: Christian van Deursen</p>

style.scss

@import "compass";
*{ box-sizing: border-box; }

body{ padding: 2em; }

h1 pre{ display: inline-block; }

ul, li{
  margin: 0;
  padding: 0;
}

li{ 
  border-right: 1px solid #fff;
  &:last-child{ border: none; }
}

.noSpaces{
  display: block;
  background: grey;
  li{
    display: inline-block;
    width: 20%;
  }
}

.fontSize{
  display: block;
  background: grey;
  font-size: 0;
  li{
    display: inline-block;
    width: 20%;
    font-size: 16px;
  }
}