Position du texte étrange dans mon code simple

Question

Code problématique ici:

#container {  /*CSS part*/
  width: 606px;
  height: 400px;
  border: 1px #434343 solid;
  border-radius: 7px;
  border-top: none;
}

#tabs {
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid;
  cursor: pointer;
  border-radius: 7px 7px 0 0;
}

#content {
  height: 300px;
  text-align: center;
}

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

#tab1 {
  background-color: blue;
}

#tab2 {
  background-color: red;
}

#tab3 {
  background-color: green;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

<div id="container"> <!-- html part -->
<ul id="tabs">
  <li id="blue">blue</li>
  <li id="red">red</li>
  <li id="green">green</li>
</ul>
<div id="content">
  <div id="tab1" class="subtab">This is tab1!</div>
  <div id="tab2" class="subtab">This is tab2!</div>
  <div id="tab3" class="subtab">This is tab3!</div>
</div>

var tablist = document.getElementById('tabs').children; //js part
var sublist = document.getElementsByClassName('subtab');

for (var i = 0; i < tablist.length; i++) {
  tablist[i].index = i; //保存每次迭代的i值

  tablist[i].addEventListener('click', function () {
    for (var x = 0; x < sublist.length; x++) {
      sublist[x].style.display = 'none';
    }

    sublist[this.index].style.display = 'block';
    this.style.borderBottom = 'none';
  })
}

Désolé, la partie html ne semble pas correcte, le démarquage est toujours une douleur pour moi.

Code complet ici démo

La chose étrange est la position du texte du contenu de l'onglet (classe de sous-onglet), si vous cliquez dans un ordre bleu-> rouge-> vert, le texte s'affiche bien au centre, cependant, si vous cliquez d'abord sur le vert, le texte apparaîtra aligné à droite, puis vous cliquez sur bleu puis vous constaterez que la position du texte sera au bon endroit.

Il y a plusieurs situations à ce sujet, mais c'est essentiellement le problème.

Pourquoi??

javascript html css

1

Drake Xiang 6 mars 2016 à 20:19

Answer 1

Le problème est dû à la hauteur de l'élément <ul> (le conteneur tabs). Vous avez précisé:

#tabs {
    height: 100px;
}

Et

#tabs li {
    height: 100px;
}

Mais vous n'avez pas pris en compte les 2 pixels supplémentaires pour les bordures .

Réparer

Pour résoudre ce problème, remplacez la hauteur de l'élément <ul> par 102px:

#tabs {
    height: 102px;
    ...
}

1

Aziz 6 mars 2016 à 17:43

Answer 2

J'ai apporté quelques modifications à votre identifiant #content en spécifiant la position et la largeur et cela devrait bien fonctionner maintenant:

#content {
  height: 300px;
  text-align: center;
  position: absolute;
  width: inherit;
}

1

jtan 6 mars 2016 à 17:38

Answer 3

C'est un problème de dimensionnement de boîte, vous pouvez résoudre ce problème en ajoutant la classe ci-dessous à votre CSS

div#container, div#container * {
    box-sizing: border-box;
}

Vous pouvez en savoir plus sur le dimensionnement des boîtes https://css-tricks.com/box-sizing/

1

patelarpan 7 mars 2018 à 03:20

Answer 4

Voici un Jsfiddle de travail

Vous venez d'ajouter position:absolute; et width:100%; à votre .subtab règle CSS

Ci-dessous est l'extrait de code.

Le sous-onglet final est

.subtab {
  display: none;
  height: 100%;
  text-align: center;
  position:absolute;
  width:100%;
}

var tablist = document.getElementById('tabs').children;
    var sublist = document.getElementsByClassName('subtab');
    
    for (var i = 0; i < tablist.length; i++) {
      tablist[i].index = i; //store the i value for every iteration
      
      tablist[i].addEventListener('click', function () {
        for (var x = 0; x < sublist.length; x++) {
          sublist[x].style.display = 'none';
        }
        
        sublist[this.index].style.display = 'block';
        this.style.borderBottom = 'none';
      })
    }

#container {
      width: 606px;
      height: 400px;
      border: 1px #434343 solid;
      border-radius: 7px;
      border-top: none;
    }
    
    #tabs {
      width: 100%;
      height: 100px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #tabs li {
      float: left;
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid;
      cursor: pointer;
      border-radius: 7px 7px 0 0;
    }
    
    #content {
      height: 300px;
      text-align: center;
    }
    
    .subtab {
      display: none;
      height: 100%;
      text-align: center;
      position:absolute;
      width:100%;
    }
    
    #tab1 {
      background-color: blue;
    }
    
    #tab2 {
      background-color: red;
    }
    
    #tab3 {
      background-color: green;
    }
    
    #blue {
      background-color: blue;
    }
    
    #red {
      background-color: red;
    }
    
    #green {
      background-color: green;
    }

<body>
 <h1>simple tab</h1>
  <div id="container">
    <ul id="tabs">
      <li id="blue">blue</li>
      <li id="red">red</li>
      <li id="green">green</li>
    </ul>
    <div id="content">
      <div id="tab1" class="subtab">This is tab1!</div>
      <div id="tab2" class="subtab">This is tab2!</div>
      <div id="tab3" class="subtab">This is tab3!</div>
    </div>
  </div>
  
  
</body>

0

Rajshekar Reddy 6 mars 2016 à 17:44

Answer 5

Je viens d'ajouter la règle text-align à la classe .subtab, comme ceci:

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

Puis, dans le JS, commentez le

this.style.borderBottom = 'none';

A parfaitement fonctionné

1

FlipFloop 6 mars 2016 à 17:51

Position du texte étrange dans mon code simple

5 réponses

Réparer

Questions connexes

De nouvelles questions

javascript