J'essaye de coder un thème qui rappelle un texte sublime, et donc j'écrivais les onglets.

Les éléments div avaient l'air bien (positionnés sur une ligne horizontale comme prévu), mais lorsque j'essayais d'insérer du texte, l'élément div se déplaçait vers le bas.

J'ai essayé position: absolute, mais cela nécessitait des valeurs de codage en dur et le redimensionnement de la fenêtre signifiait que le texte était au mauvais endroit.

Existe-t-il un moyen de résoudre ce problème et pourquoi se produit-il en premier lieu?

.tab container {
  text-align: center;
}
.tab {
  display: inline-block;
  border-bottom: 50px solid grey;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 50px;
}
<body>
  <header>
    <div class="tab_container">
      <div class="tab"><a href="#" title="Test">Test</a>
      </div>
      <div class="tab"></div>
      <div class="tab"></div>
      <div class="tab"></div>
      <div class="tab"></div>
      <div class="tab"></div>
    </div>
  </header>
</body>
0
Gab De Jesus 25 janv. 2017 à 07:46

4 réponses

Meilleure réponse

La valeur par défaut de la propriété vertical-align est baseline. Cette propriété affecte les éléments de bloc en ligne et en ligne. Cela signifie que le bas du texte sera aligné avec le bas de la première ligne du parent de bloc le plus proche. Cela ne se produit pas lorsqu'il n'y a pas de texte dans l'élément car il n'y a pas de texte à aligner.

La définition de la propriété vertical-align des éléments de bloc en ligne sur top résoudra votre problème d'alignement sans aucun positionnement statique

.tab container {
  text-align: center;
}
.tab {
  display: inline-block;
  vertical-align: top;
  border-bottom: 50px solid grey;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 50px;
}
<body>
  <header>
    <div class="tab_container">
      <div class="tab"><a href="#" title="Test">Test</a></div>
      <div class="tab"></div>
      <div class="tab"></div>
      <div class="tab"></div>
      <div class="tab"></div>
      <div class="tab"></div>
    </div>
  </header>
</body>
2
25 janv. 2017 à 08:43

Je pense que vous devriez faire en sorte que l'enfant suive la position du parent, vous devez donc ajouter une position relative sur .tab et une position absolue sur .tab a

.tab container {
text-align: center;
}

.tab {
display: inline-block;
border-bottom: 50px solid grey;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 100px;
position:relative;
}
.tab a{
  position:absolute;
  top:15px;
  z-index:10;
  left:30px;
}
<body>
    <header>
        <div class="tab_container">
            <div class="tab"><a href="">TEST</a></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"><a href="">TEST</a></div>
        </div>
    </header>
</body>
1
Adzimzf 25 janv. 2017 à 05:28

Je n'ai pas encore essayé, mais je pense que vous avez raté un en-tête ici.

Essayez-le,

  <header>
  </header>    

<body>

        <div class="tab_container">
            <div class="tab"><a href="#" title="Test">Test</a></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>

</body>
0
punk73 25 janv. 2017 à 04:51

Vous pouvez utiliser float:left; pour tous les éléments de l'onglet. Comme:

.tab{
    float:left; 
}
0
Rust 25 janv. 2017 à 07:33