回答編集履歴

2

書式改善

2020/09/01 11:17

投稿

hatena19
hatena19

スコア33810

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
- /* padding-left:20px;*/
65
+ display: block;
68
66
 
69
- display: block;
67
+ width:100%;
70
68
 
71
- width:100%;
69
+ height:100%;
72
70
 
73
- height:100%;
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

コード追記

2020/09/01 11:17

投稿

hatena19
hatena19

スコア33810

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
+ ```