create compatible grid layout from an unordered list - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

create compatible grid layout from an unordered list

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor si</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <style type="text/css" media="screen">
ul.grid {<!--from  w ww . ja v  a  2s  .c  o m-->
   list-style:none;
   margin:0;
   padding:0;
   width:221px;
   overflow:hidden;
   border-bottom:2px solid Chartreuse;
}

ul.grid li {
   display:inline;
   float:left;
   border:2px solid yellow;
   padding:6px;
   padding-bottom:1001.6em;
   margin-bottom:-1001em;
}

ul.grid li.reset {
   clear:left;
}

ul.grid li {
   width:99px;
   border-left:2px solid blue;
   border-right:2px solid pink;
   padding-left:6px;
}

ul.grid li + li {
   width:99px;
   border-left:2px solid OrangeRed;
   border-right:2px solid grey;
   padding-left:6px;
}

ul.grid li + li + li {
   width:98px;
   border-left:2px solid BlueViolet;
   border-right:0 none;
   padding-left:6px;
}

ul.grid li + li + li + li {
   padding-left:10px;
   border-left:0 none;
   border-right:2px solid Chartreuse;
}

ul.grid li + li + li + li + li {
   width:99px;
   border-left:2px solid yellow;
   border-right:2px solid blue;
   padding-left:6px;
}

ul.grid li + li + li + li + li + li {
   width:99px;
   border-left:2px solid pink;
   border-right:2px solid OrangeRed;
   padding-left:6px;
}

ul.grid li + li + li + li + li + li + li {
   width:98px;
   border-left:2px solid grey;
   border-right:0 none;
   padding-left:6px;
}

ul.grid li + li + li + li + li + li + li + li {
   padding-left:10px;
   border-left:0 none;
   border-right:2px solid BlueViolet;
}

ul.grid li + li + li + li + li + li + li + li + li {
   width:99px;
   border-left:2px solid Chartreuse;
   border-right:2px solid yellow;
   padding-left:6px;
}

ul.grid li + li + li + li + li + li + li + li + li + li {
   width:99px;
   border-left:2px solid blue;
   border-right:2px solid pink;
   padding-left:6px;
}
</style> 
 </head> 
 <body> 
  <ul class="grid"> 
   <li class="reset">Lorem ipsum dolor sit amet, consectetur adipiscing elit. M</li> 
   <li>Lorem ip</li> 
   <li class="reset">Lorem ipsu</li> 
   <li>Lorem ipsum</li> 
   <li class="reset">Lorem ipsu</li> 
   <li>Lorem ipsum dolor sit amet, consectetu</li> 
   <li class="reset">Lorem ip</li> 
   <li>Lorem ipsum dolor sit amet</li> 
   <li class="reset">Lorem ipsum dolor sit amet, consectetur adipis</li> 
   <li>Lorem ipsu</li> 
  </ul>  
 </body>
</html>

Related Tutorials