質問編集履歴

4

add related question

2021/03/03 05:06

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,15 @@
16
16
 
17
17
 
18
18
 
19
-
19
+ ## 関連した質問
20
+
21
+ 以下の質問に関連している質問なのですが、既に回答を頂いていたため、追記するよりは新規投稿した方が良いと判断し、別質問として投稿致しました。
22
+
23
+
24
+
25
+ [https://teratail.com/questions/325674
26
+
27
+ ](https://teratail.com/questions/325674)
20
28
 
21
29
 
22
30
 
@@ -100,15 +108,7 @@
100
108
 
101
109
 
102
110
 
103
- # 関連した質問
111
+
104
-
105
- 以下の質問に関連している質問なのですが、既に回答を頂いていたため、追記するよりは新規投稿した方が良いと判断し、別質問として投稿致しました。
106
-
107
-
108
-
109
- [https://teratail.com/questions/325674
110
-
111
- ](https://teratail.com/questions/325674)
112
112
 
113
113
 
114
114
 

3

add img

2021/03/03 05:06

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -120,6 +120,12 @@
120
120
 
121
121
 
122
122
 
123
+ ## 結果
124
+
125
+ ![イメージ説明](576d8aa84d0429c3f16463ba7084c604.png)
126
+
127
+
128
+
123
129
  ## HTML
124
130
 
125
131
  ```

2

remove list-style-type: none;

2021/03/03 05:04

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -116,6 +116,8 @@
116
116
 
117
117
  別のパターンも試してみました。
118
118
 
119
+ こちらのパターンも同様、span要素の高さが300pxになります。
120
+
119
121
 
120
122
 
121
123
  ## HTML
@@ -170,8 +172,6 @@
170
172
 
171
173
  .parent {
172
174
 
173
- list-style-type: none;
174
-
175
175
  display: flex;
176
176
 
177
177
  margin: 0;

1

a

2021/03/03 05:04

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -109,3 +109,113 @@
109
109
  [https://teratail.com/questions/325674
110
110
 
111
111
  ](https://teratail.com/questions/325674)
112
+
113
+
114
+
115
+ # 追記
116
+
117
+ 別のパターンも試してみました。
118
+
119
+
120
+
121
+ ## HTML
122
+
123
+ ```
124
+
125
+ <div class="container">
126
+
127
+ <div class="parent">
128
+
129
+ <div class="child">
130
+
131
+ <div class="grand-child"><span>1</span></div>
132
+
133
+ </div>
134
+
135
+
136
+
137
+ <div class="child">
138
+
139
+ <div class="grand-child"><span>1</span></div>
140
+
141
+ </div>
142
+
143
+
144
+
145
+ <div class="child">
146
+
147
+ <div class="grand-child"><span>1</span></div>
148
+
149
+ </div>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ ```
156
+
157
+
158
+
159
+ ## CSS
160
+
161
+ ```
162
+
163
+ .container {
164
+
165
+ height: 300px;
166
+
167
+ }
168
+
169
+
170
+
171
+ .parent {
172
+
173
+ list-style-type: none;
174
+
175
+ display: flex;
176
+
177
+ margin: 0;
178
+
179
+ background-color: #cccccc;
180
+
181
+ height: 100%;
182
+
183
+ }
184
+
185
+
186
+
187
+ .child {
188
+
189
+ display: inline;
190
+
191
+ }
192
+
193
+
194
+
195
+ .child:not(:last-child) {
196
+
197
+ margin-right: 1em;
198
+
199
+ }
200
+
201
+
202
+
203
+ .grand-child {
204
+
205
+ display: inline;
206
+
207
+ }
208
+
209
+
210
+
211
+ span {
212
+
213
+ display: block;
214
+
215
+ height: 100%;
216
+
217
+ background-color: yellow;
218
+
219
+ }
220
+
221
+ ```