Minimiser l'espace dans une liste HTML
Bonsoir,
le code suivant produit une liste HTMl dans un sidenav qui fonctionne bien mais j'aimerais bien minimiser l'espace entre les éléments de la liste. J'ai mis line-height: 4px mais j'ai encore de l'espace. Qu'est ce quoi je dois changer dans les CSS svp?
CSS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| .sidenav {
background: #004050;
width: 250px;
top: unset;
height: calc(100% - 112px) !important;
overflow: auto pointer:
}
.sidenav-overlay {
z-index: 1;
}
#accordian h3 {
background: #003040;
background: linear-gradient(#003040, #002535);
}
#accordian h3 a {
padding: 10px 50px;
font-size: 17px;
line-height: 1px;
display: table;
vertical-align: middle;
color: white;
cursor: pointer;
}
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
.material-icons {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
font-size: 28px !important;
}
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 13px;
line-height: 1px;
display: block;
transition: all 0.15s;
position: relative;
cursor: pointer;
}
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
#accordian ul ul {
margin-left: 35px;
display: none;
}
#accordian li.active > ul {
display: block;
}
#accordian ul ul ul {
border-left: 2px dotted rgba(0, 0, 0, 0.5);
}
i {
margin-right: 10px;
}
.changed {
margin-left: 5px;
} |
Code HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <div class="sidenav sidenav-fixed" id="nav-mobile">
<div id="accordian">
<ul>
<li>
<h3><a onclick="load('home', '')"><i class="material-icons">home</i><span style="">Home</span></a></h3>
</li>
<li>
<h3><a onclick="load('intro', '')"><i class="material-icons">apps</i>Content Table</a></h3>
</li>
<li>
<h3><a onclick="load('copyright', '')"><i class="material-icons">copyright</i>Copyright</a></h3>
</li>
<li>
<h3><a onclick="load('file')"><i class="material-icons">assignment</i>Unit A<i class="fa fa-angle-down changed"></i></a></h3>
<ul>
<li>
<h3><a onclick="load('file')">Module 1<i class="fa fa-angle-down changed"></i></a></h3>
<ul>
<li>
<h3><a onclick="load('file')">page 1</a></h3>
</li>
<li>
<h3><a onclick="load('file')">page 2</a></h3>
</li>
</ul>
</li>
<li>
<h3><a onclick="load('file')">Module 2<i class="fa fa-angle-down changed"></i></a></h3>
<ul>
<li>
<h3><a onclick="load('file')">page 1</a></h3>
</li>
<li>
<h3><a onclick="load('file')">page 2</a></h3>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3><a onclick="load('file')"><i class="material-icons">assignment</i>Unit B<i class="fa fa-angle-down changed"></i></a></h3>
<ul>
<li>
<h3><a onclick="load('file')">Module 3<i class="fa fa-angle-down changed"></i></a></h3>
<ul>
<li>
<h3><a onclick="load('file)">page 1</a></h3>
</li>
<li>
<h3><a onclick="load('file')">page 2</a></h3>
</li>
</ul>
</li>
<li>
<h3><a onclick="load('file')">Module 4<i class="fa fa-angle-down changed"></i></a></h3>
<ul>
<li>
<h3><a onclick="load('file')">page 1</a></h3>
</li>
<li>
<h3><a onclick="load('file')">page 2</a></h3>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div> |
Merci beaucoup pour votre aide.
