'float'

dabblet.css

/* 'float' */
.float > li {
  float: left;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* 'inline-block' */
.inline-block > li {
  display: inline-block;
}
.inline-hack {
  letter-spacing: -0.32em;
}
.inline-hack > li {
  letter-spacing: normal;
}

/* 'table' */
.table {
  display: table;
  table-layout: fixed;
}
.table > li {
  display: table-cell;
}

.table-full {
  width: 100%;
}

/* Common navigation style */
.nav {
  margin-top: 50px;
  margin-bottom: 50px;
  /* width: 100%; */
}
.nav > li {
  width: 120px;
}
.nav > li > a {
  display: block;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: tomato;
  text-align: center;
  font-weight: bold;
}
.nav > li > a:hover {
  background-color: orange;
}

/* Wrap all navigation */
.container {
  padding: 50px 0;
  width: 700px;
  background-color: #E9D8De;
}

/* ---- for demo --- */
* {
  margin: 0;
  padding: 0;
}

body {
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

dabblet.html

<div class="container">
<!-- Default -->
<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<hr>

<div class="container">
<!-- Use 'float' -->
<ul class="nav float clearfix">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<hr>

<div class="container">
<!-- Use 'inline-block' -->
<ul class="nav inline-block">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<div class="container">
<!-- Use 'inline-block' with Markup fix -->
<ul class="nav inline-block">
 <li><a href="#">Home</a></li><!--
 --><li><a href="#">News</a></li><!--
 --><li><a href="#">Service</a></li><!--
 --><li><a href="#">About</a></li><!--
 --><li><a href="#">Contact</a></li>
</ul>
</div>

<div class="container">
<!-- Use 'inline-block' with CSS Hack fix -->
<ul class="nav inline-block inline-hack">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<hr>

<div class="container">
<!-- Use 'table' -->
<ul class="nav table">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<div class="container">
<!-- Use 'table' width full-width -->
<ul class="nav table table-full">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<div class="container">
<!-- Use 'table' width full-width and cell +1 -->
<ul class="nav table table-full">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
</ul>
</div>

</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"140","seethrough":"","prefixfree":"1","page":"css"}