liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のレイアウト関連 - display属性(list-item)

CSS3.0 ┗━CSS3.0のレイアウト関連

list-item属性値は対象をul形式に変換する。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> list-item </title>
   <style type="text/css">
        body>div{
            display: list-item;
            list-style-type: disc ;
            margin-left: 20px;
        }
        div>div{
            display: list-item;
            list-style-type: square;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<div id="div1">
    タイトル1
    <div>要素1-1</div>
    <div>要素1-2</div>
    <div>要素1-3</div>
</div>
<div id="div2">
    タイトル2
    <div>要素2-1</div>
    <div>要素2-2</div>
    <div>要素2-3</div>
</div>
</body>
</html>

f:id:liguofeng29:20160203222034p:plain