Discussion :

[Hadock]

Bonjour, j'ai trouvé une solution pour aligner verticalement mon texte avec mes icônes; seulement il faut les mettre en float right donc comme vous pouvez vous en douter ça crée un petit soucie! Vous avez une idée pour gérer ce problème ça fait un moment que je cherche et je pense que j'ai loupé "le petit détail avec le diable dedans". Merci d'avance!

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="sideNavContent">
            <ul class="ulMenu">
                <li><i class="material-icons">home</i><span class="textMenu">Home</span></li>
                <li><i class="material-icons">code</i><span class="textMenu">Code</span></li>
                <li><i class="material-icons">receipt</i><span class="textMenu">Blog</span></li>
                <li><i class="material-icons">explore</i><span class="textMenu">Forum</span></li>
                <li><i class="material-icons">create</i><span class="textMenu">Portfolio</span></li>
                <li><i class="material-icons">description</i><span class="textMenu">A propos</span></li>
                <li><p><i class="material-icons">email</i><span class="textMenu">Contact</span></p></li>
            </ul>
        </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/* CLEARANCE AREA MATERIAL ICON */
.material-icons {
    padding: 12px;
}
/* MENU CONTENT STYLE */
.ulMenu {
    list-style: none;
}
.ulMenu li {
    border-top: 1px solid grey;
    background-color: #ececed;
}
.ulMenu li:hover {
    cursor: pointer;
    background-color: #dfdfe0;
}
.ulMenu:last-child {
    border-bottom: 1px solid grey;
}
.sideNavMenu {
    padding: 20px 0 0 0;
    text-align: center;
}
.textMenu {
    display: block;
    padding: 15px;
    float: right;
    left: -135px;
    position: relative;
}