回答編集履歴
2
書式改善
test
CHANGED
@@ -29,8 +29,6 @@
|
|
29
29
|
---
|
30
30
|
|
31
31
|
|
32
|
-
|
33
|
-
```
|
34
32
|
|
35
33
|
文字が増えて折り返しが発生する場合には対応するには、
|
36
34
|
|
@@ -64,17 +62,15 @@
|
|
64
62
|
|
65
63
|
li a {
|
66
64
|
|
67
|
-
|
65
|
+
display: block;
|
68
66
|
|
69
|
-
d
|
67
|
+
width:100%;
|
70
68
|
|
71
|
-
|
69
|
+
height:100%;
|
72
70
|
|
73
|
-
|
71
|
+
background: tomato;
|
74
72
|
|
75
|
-
background: tomato;
|
76
|
-
|
77
|
-
text-align: center; /*水平中央揃え*/
|
73
|
+
text-align: center; /*水平中央揃え*/
|
78
74
|
|
79
75
|
display: flex;
|
80
76
|
|
@@ -84,8 +80,4 @@
|
|
84
80
|
|
85
81
|
}
|
86
82
|
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
83
|
```
|
1
コード追記
test
CHANGED
@@ -23,3 +23,69 @@
|
|
23
23
|
}
|
24
24
|
|
25
25
|
```
|
26
|
+
|
27
|
+
|
28
|
+
|
29
|
+
---
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
```
|
34
|
+
|
35
|
+
文字が増えて折り返しが発生する場合には対応するには、
|
36
|
+
|
37
|
+
まずはHTMLでaリンク内のテキストを囲む必要があると思います。
|
38
|
+
|
39
|
+
|
40
|
+
|
41
|
+
```html
|
42
|
+
|
43
|
+
<ul>
|
44
|
+
|
45
|
+
<li><a href=""><span>テキスト</span></a></li>
|
46
|
+
|
47
|
+
<li><a href=""><span>テキスト</span></a></li>
|
48
|
+
|
49
|
+
<li><a href=""><span>テキスト テキスト テキスト</span></a></li>
|
50
|
+
|
51
|
+
<li><a href=""><span>テキスト テキスト テキスト テキスト<span></a></li>
|
52
|
+
|
53
|
+
</ul>
|
54
|
+
|
55
|
+
```
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
そうすればCSS Flexboxで簡単に中央寄せできます。
|
60
|
+
|
61
|
+
|
62
|
+
|
63
|
+
```css
|
64
|
+
|
65
|
+
li a {
|
66
|
+
|
67
|
+
/* padding-left:20px;*/
|
68
|
+
|
69
|
+
display: block;
|
70
|
+
|
71
|
+
width:100%;
|
72
|
+
|
73
|
+
height:100%;
|
74
|
+
|
75
|
+
background: tomato;
|
76
|
+
|
77
|
+
text-align: center; /*水平中央揃え*/
|
78
|
+
|
79
|
+
display: flex;
|
80
|
+
|
81
|
+
justify-content: center;
|
82
|
+
|
83
|
+
align-items: center;
|
84
|
+
|
85
|
+
}
|
86
|
+
|
87
|
+
|
88
|
+
|
89
|
+
|
90
|
+
|
91
|
+
```
|