回答編集履歴

2

コードを再編集しました

2017/09/15 00:42

投稿

onodo
onodo

スコア97

test CHANGED
@@ -1,4 +1,4 @@
1
- liタグtableにaタグtable-cellした上で、jQueryでliタグの高さを揃えるようにしました。
1
+ `li`と`a`の高さ取得、その差分`a`の`padding`与えて高さを揃え、文字が真ん中にくるようにしました。
2
2
 
3
3
 
4
4
 
@@ -12,7 +12,7 @@
12
12
 
13
13
  border-right: 2px dotted #ccc;
14
14
 
15
- display: table;
15
+ list-style:none;
16
16
 
17
17
  }
18
18
 
@@ -24,15 +24,15 @@
24
24
 
25
25
  box-sizing: border-box;
26
26
 
27
- display: table-cell;
27
+ display: block;
28
28
 
29
- padding: 10px;
29
+ padding: 0 10px;
30
30
 
31
31
  color: #43230d;
32
32
 
33
33
  text-align: center;
34
34
 
35
- vertical-align: middle;
35
+ word-break: break-all;
36
36
 
37
37
  }
38
38
 
@@ -42,21 +42,31 @@
42
42
 
43
43
  $(function(){
44
44
 
45
- var box = $('ul li'), // 適宜クラスを当てて下さい
45
+ var $box = $('ul li'), // 適宜クラスを当てて下さい
46
46
 
47
- height = 0;
47
+ $Link = $box.children('a'),
48
48
 
49
- for (var i = 0; i < box.length; i++) {
49
+ boxHeight = $box.height();
50
50
 
51
- if( box.eq(i).height() > height) {
51
+ for (var i = 0; i < $Link.length; i++) {
52
52
 
53
- height = box.eq(i).height();
53
+ var linkHeight = $Link.eq(i).height(),
54
54
 
55
+ // 差分をとります(上下半分ずつpaddingとするので÷2しています)
56
+
57
+ diff = (boxHeight - linkHeight) / 2;
58
+
59
+ $Link.eq(i).css({
60
+
61
+ // 差分と、追加の余白で10px足しています
62
+
63
+ paddingTop : diff + 10,
64
+
65
+ paddingBottom : diff + 10
66
+
55
- }
67
+ });
56
68
 
57
69
  }
58
-
59
- box.height(height);
60
70
 
61
71
  });
62
72
 

1

コードを書き換えました。

2017/09/15 00:42

投稿

onodo
onodo

スコア97

test CHANGED
@@ -1,28 +1,20 @@
1
- 入れ子な構造になってしまいますが、aタグの中にspanを入れてみたらどうでしょうか?
2
-
3
- そうすればflexboxか`display:table`など中央寄せがと思い
1
+ liタグをtableにしaタグをtable-cellにした上、jQueryliタグの高さを揃えようにしした
4
-
5
-
6
-
7
- ```html
8
-
9
- <ul>
10
-
11
- <li><a href="#"><span>HOME</span></a></li>
12
-
13
- <li><a href="#"><span>SAMPLE1</span></a></li>
14
-
15
- <li><a href="#"><span>SAMPLE2SAMPLE2SAMPLE2</span></a></li>
16
-
17
- <li><a href="#"><span>SAMPLE3SAMPLE3SAMPLE3S<br>AMPLE3SAMPLE3SAMPLE3</span></a></li>
18
-
19
- </ul>
20
-
21
- ```
22
2
 
23
3
 
24
4
 
25
5
  ```css
6
+
7
+ ul li {
8
+
9
+ flex: 1;
10
+
11
+ -webkit-flex: 1;
12
+
13
+ border-right: 2px dotted #ccc;
14
+
15
+ display: table;
16
+
17
+ }
26
18
 
27
19
  ul li a {
28
20
 
@@ -32,11 +24,7 @@
32
24
 
33
25
  box-sizing: border-box;
34
26
 
35
- display: table;
27
+ display: table-cell;
36
-
37
- width: 100%;
38
-
39
- height: 100%;
40
28
 
41
29
  padding: 10px;
42
30
 
@@ -44,20 +32,32 @@
44
32
 
45
33
  text-align: center;
46
34
 
47
- }
48
-
49
- ul li a span {
50
-
51
- display: table-cell;
52
-
53
35
  vertical-align: middle;
54
36
 
55
37
  }
56
38
 
57
39
  ```
58
40
 
41
+ ```JavaScript
59
42
 
43
+ $(function(){
60
44
 
61
- ul,liには変更ありません。
45
+ var box = $('ul li'), // 適宜クラスを当てて下さい
62
46
 
47
+ height = 0;
48
+
49
+ for (var i = 0; i < box.length; i++) {
50
+
51
+ if( box.eq(i).height() > height) {
52
+
63
- 今回は`display:table`で中央寄せにしています。
53
+ height = box.eq(i).height();
54
+
55
+ }
56
+
57
+ }
58
+
59
+ box.height(height);
60
+
61
+ });
62
+
63
+ ```