Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
<h3>Normal List:</h3>
<ul>
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
 <hr>
 <h3>Inline List</h3>
 <ul class="inline-list">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
 <hr>
 <h3>Inline-block list</h3>
 <ul class="inline-block-list">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
 <hr>
 <h3>Block list</h3>
  <ul class="block-list">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// ----

// don't worry that it says SCSS (Sass)
// this is all basic CSS you can paste right back in
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 /* 
inline
allowed: 
elements to the left and right
(you can do text align with inline)
*/
.inline-list > li{
  display:inline;
  background:#eee;
  padding:1em;
  width:100px;// doesn't work
}
/* 
inline-block 
allowed: 
TOP & BOTTOM MARGINS
SET WIDTHS 
*/
.inline-block-list > li{
  display:inline-block;
  background:#eee;
  padding:1em;
  margin-top:1em;
  width:100px; // works!
}
/* 
block 
forces a break between each element
*/
.block-list > li{
  display:block;
  background:#eee;
  padding:1em;
  margin-bottom:1em;
  width:100px;
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

 /* 
inline
allowed: 
elements to the left and right
(you can do text align with inline)
*/
.inline-list > li {
  display: inline;
  background: #eee;
  padding: 1em;
  width: 100px;
}

/* 
inline-block 
allowed: 
TOP & BOTTOM MARGINS
SET WIDTHS 
*/
.inline-block-list > li {
  display: inline-block;
  background: #eee;
  padding: 1em;
  margin-top: 1em;
  width: 100px;
}

/* 
block 
forces a break between each element
*/
.block-list > li {
  display: block;
  background: #eee;
  padding: 1em;
  margin-bottom: 1em;
  width: 100px;
}

SassMeister-rendered.html

<div class="container">
<h3>Normal List:</h3>
<ul>
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
 <hr>
 <h3>Inline List</h3>
 <ul class="inline-list">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
 <hr>
 <h3>Inline-block list</h3>
 <ul class="inline-block-list">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
 <hr>
 <h3>Block list</h3>
  <ul class="block-list">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
 </ul>
</div>