我的简单代码中的奇怪文本位置

Weird text position in my simple code

本文关键字：文本 位置 简单 代码 我的      更新时间：2023-09-26

这里有问题的代码： 

#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';
  })
}

抱歉，html 部分似乎不正确，降价对我来说总是很痛苦。

完整代码在这里演示

奇怪的是选项卡内容（子选项卡类）的文本位置，如果按蓝色>红色>绿色的顺序单击，文本在中心显示正常，但是，如果您先单击绿色，文本将显示为右对齐，然后单击蓝色，然后您会发现文本位置将是正确的位置。

围绕这种情况有几种情况，但基本上就是这样。

为什么？？

该问题是由<ul>元素（选项卡容器）的高度引起的。您已指定：

#tabs {
    height: 100px;
}

和 

#tabs li {
    height: 100px;
}

但是您没有考虑边框的 2 个附加像素。

修复

要解决此问题，请将 <ul> 元素的高度更改为 102px ：

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

我通过指定位置和宽度对您的 #content id 进行了一些更改，它现在应该运行良好：

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

我刚刚text-align规则添加到.subtab类中，如下所示：

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

然后，在 JS 中，注释掉 

this.style.borderBottom = 'none';

工作完美

这是盒子大小的问题，您可以通过将下面的类添加到您的 CSS 中来解决此问题

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

您可以了解有关盒子尺寸 https://css-tricks.com/box-sizing/

的更多信息

这是一个工作 Jsfiddle

刚刚将position:absolute;和width:100%;添加到您的.subtab css 规则中

下面是代码片段。

最终的 .subtab 是

.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>

相关文章：