HTML Element Style How to - Create 6 column fluid layout with li

Question

We would like to know how to create 6 column fluid layout with li.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.list {<!--from   www .  j a  v  a  2 s .com-->
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  width: 16.66666666666667%;
  float: left;
}

.list li a {
  display: block;
  border: 1px solid #ddd;
  text-align: center;
}
</style>
</head>
<body>
  <ul class="list">
    <li class="list-element first"><a>Item 1</a></li>
    <li class="list-element"><a>Item 2</a></li>
    <li class="list-element"><a>Item 3</a></li>
    <li class="list-element"><a>Item 4</a></li>
    <li class="list-element"><a>Item 5</a></li>
    <li class="list-element last"><a>Item 6</a></li>
  </ul>
</body>
</html>

The code above is rendered as follows: