何かが違います

左上の図のようになりません
宜しくお願い致します。

html
1<!DOCTIPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>TAb Menu Sample</title>
6  <style>
7  body {
8    padding: 0;
9    margin: 0;
10    font-family: Verdana, sans-serif;
11  }
12  .container {
13    padding: 0;
14    margin: 30px auto;
15    width: 500px;
16    background: #dce0e0;
17  }
18  ul.menu {
19    list-style: none;
20    padding: 0;
21    margin: 0;
22    font-size: 0;
23   }
24  ul.menu li {
25    dispalay: inline-block;
26    }
27    ul.menu li a {
28      display: inline-block;
29      font-size: 14px;
30      width: 80px;
31      height: 20px;
32      line-height: 20px;
33      text-align: center;
34      text-decoration: none
35      padding: 7px;
36      color: #333;
37      }
38</style>
39
40</head>
41<body>
42  <div class="container">
43    <ul class="menu">
44      <li><a href="#">About</a></li>
45      <li><a href="#">Service</a></li>
46      <li><a href="#">conctact</a></li>
47      <div class="content" id="about">
48        about about about  about about about  about about about  about about about  about about about  about about about  about about about  about about about  about about about  about about about  about about about  about about about  about about about
49      </div>
50      <div class="content" id="service">
51        service service service service service service  service service service service service service  service service service service service service  service service service service service service  service service service service service service
52      </div>
53      <div class="content" id="contact">
54        contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact
55      </div>
56    </div>
57</body>
58</html>
59

行動規範の内容に同意します

回答1件

ベストアンサー

28行目、dispalayプロパティは存在しない。displayプロパティに修正。
38行目、セミコロンが存在しない。
div要素はul要素の子要素として存在してはいけない。
ulタグの対応が取れていない。

HTML
1<!DOCTIPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>TAb Menu Sample</title>
6    <style>
7        body {
8            padding: 0;
9            margin: 0;
10            font-family: Verdana, sans-serif;
11        }
12
13        .container {
14            padding: 0;
15            margin: 30px auto;
16            width: 500px;
17            background: #dce0e0;
18        }
19
20        ul.menu {
21            list-style: none;
22            padding: 0;
23            margin: 0;
24            font-size: 0;
25        }
26
27        ul.menu li {
28            display: inline-block;
29        }
30
31        ul.menu li a {
32            display: inline-block;
33            font-size: 14px;
34            width: 80px;
35            height: 20px;
36            line-height: 20px;
37            text-align: center;
38            text-decoration: none;
39            padding: 7px;
40            color: #333;
41        }
42    </style>
43</head>
44<body>
45<div class="container">
46    <ul class="menu">
47        <li><a href="#">About</a></li>
48        <li><a href="#">Service</a></li>
49        <li><a href="#">conctact</a></li>
50    </ul>
51    <div class="content" id="about">
52        about about about about about about about about about about about about about about about about about about
53        about about about about about about about about about about about about about about about about about about
54        about about about
55    </div>
56    <div class="content" id="service">
57        service service service service service service service service service service service service service
58        service service service service service service service service service service service service service
59        service service service service
60    </div>
61    <div class="content" id="contact">
62        contact contact contact contact contact contact contact contact contact contact contact contact contact
63        contact contact contact contact contact contact contact contact contact contact contact contact contact
64        contact contact contact contact contact contact contact contact contact contact contact contact
65    </div>
66</div>
67</body>
68</html>