LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Inline-block / white-space bug

original...
  • one
  • two
  • three
fixed by funky code formatting...
  • one
  • two
  • three
fixed by adding html comments...
  • one
  • two
  • three
fixed by CSS margin-right: -4px; (breaks in IE6&7)...
  • one
  • two
  • three
fixed by omitting the </li>
  • one
  • two
  • three
fixed with font-size: 0 via: https://twitter.com/#!/garand/status/183253526313566208

  • one
  • two
  • three

flexbox
  • one
  • two
  • three
CSS
body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px 20px;
}

ul {
  list-style: none
}

li {
  background: slategrey;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}
ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:20

Related Codes

Pen ID
Pen ID
Pen ID