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: 1000px;
}
.boxList li {
    background: #f3f3f3;
    height: 50px;
    float: left;
    font-size:11px;
    line-height: 50px;
    margin-left: 10px;
    text-align: center;
    width: 192px;
}
.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)
Chiều rộng wrapper:
(min: 100px, max: 2000px)
px
Khoảng cách giữa các item:
(min: 0px, max: 100px)
px