teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

質問内容、コード編集

2020/11/02 03:55

投稿

shirout
shirout

スコア36

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,8 @@
1
1
  class="main"の中で、入れ子構造を作りたく以下のコードを作成しました。
2
2
  しかし、main-ue-leftとmain-ue-centerのみ入れ子になっていて、main-ue-rightも入れ子に反映されていない状況です。
3
- main-ue-rightまで反映されているのであれば予想はつくのですが、、
4
3
 
4
+ やりたいことは、main-sita-left,main-sita-center,main-sita-rightのボタン三つをmain要素の中に入れて横並びに配置したいです。
5
+
5
6
  ```html
6
7
  <div id = "app">
7
8
  <div class = "all">
@@ -13,7 +14,7 @@
13
14
  <div class = "main-ue">
14
15
  <button class = "main-ue-left">1</div>
15
16
  <button class = "main-ue-center">2</div>
16
- <div class = "main-ue-right">3</div>
17
+ <button class = "main-ue-right">3</div>
17
18
  </div>
18
19
  <div class = "main-sita">
19
20
  <button class = "main-sita-left">4</div>
@@ -23,4 +24,69 @@
23
24
  </div>
24
25
  </div>
25
26
  </div>
27
+ ```
28
+ ```css
29
+ html,
30
+ body {
31
+ height: 100%;
32
+ width: 100%;
33
+ margin: 0;
34
+ }
35
+ #app {
36
+ height: 100%;
37
+ width: 100%;
38
+ background-color: red;
39
+ }
40
+ .all {
41
+ height: 100%;
42
+ }
43
+
44
+ .head {
45
+ height: 20%;
46
+ width: 100%;
47
+ text-align: center;
48
+ display: flex;
49
+ padding-left: 20px;
50
+ padding-top: 20px;
51
+ }
52
+ .head-left {
53
+ height: 30px;
54
+ width: 150px;
55
+ border: solid 1px;
56
+ border-radius: 2px;
57
+ }
58
+ .head-right {
59
+ height: 30px;
60
+ width: 150px;
61
+ border: solid 1px;
62
+ border-radius: 2px;
63
+ margin-left: 20px;
64
+ }
65
+
66
+ .main {
67
+ height: 60vh;
68
+ width: 100%;
69
+ background-color: #fff;
70
+ }
71
+ .main-ue {
72
+   display:inline-block
73
+ }
74
+ .main-ue-left {
75
+ height: 100px;
76
+ width: 130px;
77
+ font-size: 30px;
78
+ border-radius: 5px;
79
+ }
80
+ .main-ue-center {
81
+ height: 100px;
82
+ width: 130px;
83
+ font-size: 30px;
84
+ border-radius: 5px;
85
+ }
86
+ .main-ue-right {
87
+ height: 100px;
88
+ width: 130px;
89
+ font-size: 30px;
90
+ border-radius: 5px;
91
+ }
26
92
  ```