回答編集履歴
2
説明の改善
answer
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
```css
|
|
2
2
|
.inline-linkcard a {
|
|
3
3
|
padding: 10px;
|
|
4
|
-
display: grid;
|
|
4
|
+
display: grid; /* ここ */
|
|
5
|
-
grid-template-columns: 16% 1fr;
|
|
5
|
+
grid-template-columns: 16% 1fr; /* ここ */
|
|
6
6
|
text-decoration: none;
|
|
7
7
|
}
|
|
8
8
|
```
|
|
9
9
|
|
|
10
10
|
上記で grid で2列にして1列目の幅を 16% にしているのが原因でしょうね。
|
|
11
|
-
aリンク内の画像や、次のaリンク内のタイトルの幅がカードの幅の16%になってしまってます。
|
|
11
|
+
aリンク内の画像や、次のaリンク内のタイトルの幅がカード(.inline-linkcard)の幅の16%になってしまってます。
|
|
12
12
|
|
|
13
13
|
gridは子要素のレイアウトを決めるものですので、aリンク画像とaリンクタイトルを横並び（2列）にしたいのなら、親要素の .inline-linkcard に設定してください。
|
|
14
14
|
|
1
説明の改善
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
上記で grid で2列にして1列目の幅を 16% にしているのが原因でしょうね。
|
|
11
11
|
aリンク内の画像や、次のaリンク内のタイトルの幅がカードの幅の16%になってしまってます。
|
|
12
12
|
|
|
13
|
-
gridは子要素のレイアウトを決めるものですので、aリンク画像とaリンクを横並び（2列）にしたいのなら、親要素の .inline-linkcard に設定してください。
|
|
13
|
+
gridは子要素のレイアウトを決めるものですので、aリンク画像とaリンクタイトルを横並び（2列）にしたいのなら、親要素の .inline-linkcard に設定してください。
|
|
14
14
|
|
|
15
15
|
```css
|
|
16
16
|
.inline-linkcard {
|