display list-item
از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>وبگو | ویژگی inline-block در css</title>
<!– http://webgoo.ir –>
<style type=”text/css”>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:list-item;
height:200px;
width:200px;
background:#F60;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
.block-2{
display:list-item;
height:200px;
width:200px;;
background:#39C;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
.block-3{
display:list-item;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
</style>
</head>
<body>
<div class=”block-1″>
display:list-item
</div>
<div class=”block-2″>
display:list-item
</div>
<div class=”block-3″>
display:list-item
</div>
</body>
</html>
کته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).
