Học web chuẩn

Block list float

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul { list-style: none; }
.boxList {
    border: 1px dashed blue;
    width: 100%;
}
.boxList li {
    background: #f3f3f3;
    height: 50px;
    float: left;
    font-size:11px;
    line-height: 50px;
    margin-left: 1%;
    text-align: center;
    width: 19.2%;
}
.boxList li:first-child {
    margin-left: 0!important;
}
.clearfix { zoom:1; }
.clearfix:after {
    display:block;
    clear:both;
    content:"";
}
</style>
</head>

<body>
<ul class="boxList clearfix">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>
</body>
</html>
Số lượng item:
(min: 2, max: 20)
Khoảng cách giữa các item:
(min: 0, max: 10%)		 %