<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>インライン・ブロック・リスト</title>
<style>
.border{
border:1px solid black;
}
.test{
}
.margin-left{
margin-left:2em;
}
</style>
</head>
<body>
<h1>インライン・ブロック・リスト</h1>
<article>
<h2>基本問題</h2>
<figure>
<div class="border">
<span class="test margin-left">元はインライン</span>
<span class="test margin-left">元はインライン</span>
<span class="test margin-left">元はインライン</span>
</div>
<div class="border">
<div class="test margin-left">元はブロック</div>
<div class="test margin-left">元はブロック</div>
<div class="test margin-left">元はブロック</div>
</div>
<ul class="border">
<li class="test">元はリスト</li>
<li class="test">元はリスト</li>
<li class="test">元はリスト</li>
</ul>
</figure>
</article>
</body>
</html>