Question

我正在尝试编写一个主题文字的主题，因此我正在编写标签。

div元素看起来很好（按计划放在水平线上），但当我尝试插入文字时，div元素会向下移动。

我已经尝试了position: absolute，但这需要硬编码值，并且调整窗口大小意味着文本位于错误的位置。

有没有办法解决这个问题，为什么它首先发生？

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

Answer 1

vertical-align属性的默认值为baseline。此属性会影响内联块和内联块元素。这意味着文本的底部将与最近的块父项的第一行的底部对齐。如果元素中没有文本，则不会发生这种情况，因为没有要对齐的文本。

将内联块元素的vertical-align属性设置为top将解决您的对齐问题，而无需任何静态定位

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

Answer 2

我认为你应该让孩子的父母的位置，所以你必须在.tab上添加相对位置，并在.tab上添加绝对位置

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以对所有标签元素使用float:left;。像：

.tab{
    float:left; 
}

Answer 4

我还没有尝试过，但我认为你错过了一个标题。

试试吧，

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

将文本插入内联块元素会垂直移动元素

4 个答案: