Discussion :

[Tristan33000]

Je n'arrive pas à aligner mes <span> incorporés dans des <li> et à gérer leurs tailles en même temps. Le "display:block;" me permet de gérer la taille mais pas l'alignement et inversement avec un "display:inline;"

Voici mon code html :

Code :

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

1
2
3
4
5
6
7
<ul id="Onglets">
          <li><span class="Onglet">Cabinet</span></li>
          <li><span class="Onglet">Valeurs</span></li> 
          <li><span class="Onglet">SavoirFaire</span></li>
          <li><span class="Onglet">Trouver</span></li>
          <li><span class="Onglet">EspacePro</span></li>
</ul>

Et le Css correspondant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.Onglet{
   background-color: white;
  border: 1px solid black;
  /*display:block;  */
  width: 20%;
}
 
#Onglets{
  list-style-type:none; 
  border: 1px solid green; 
  display: inline;
  /*width: 100%;*/
}

Merci d'avance.

Cordialement.

Tristan.

[cssman]

Je ne vois pas trop l'intérêt des ces classes... Et je ne suis pas sûr de ce que vous voulez obtenir

Pour ma part je coderais de la façon suivante :

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="onglets">
<ul>
    <li>Cabinet</li>
    <li>Valeurs</li> 
    <li>SavoirFaire</li>
    <li>Trouver</li>
    <li>EspacePro</li>
</ul>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
#onglets ul {
  background-color: white;
  border: 1px solid black;
  width: 20%;
}
#onglets li{
  list-style-type:none; 
  border: 1px solid green; 
  display:block;
}