css - 如果行数不同则阻止失控

Question

.inDB {
  background-color: #53354A;
  color: #53354A;
  padding: 2% 3%;
  height: 100px;
  width: 130px;
}

<div id="section-one-content">
  <ul id="gt" class="meta_data">
    <h2 style="color:#859900; padding:30px">No Meta Data</h2>
    <li><button class="inDB"></button></li>
    <li><button class="inDB"></button></li>
    <li><button class="inDB"></button></li>
  </ul>
</div>

您可以看到第一个按钮略高于其他2.因为它只有1行作为文本内容

如何解决问题并使所有问题都在同一行.

Answer 1

每个默认情况下,内联元素与第一个文本行对齐.您可以执行以下操作:

1. 你可以设置

   li {
     display: inline-block;
     vertical-align: top;
   }
   

   这样,您的<li>元素(和包含按钮)将与其容器的顶部对齐

2. 不要使用<h2>的直接孩子<ul>的不是没有其他的子元素<li>被允许<ul>(见MDN以获取更多信息)
3. 一般检查您的标记,并确保没有其他CSS规则覆盖您的垂直对齐

这是一个工作示例:

li {
  display: inline-block;
}
#section-two-content li {
  vertical-align: top;
}
.inDB {
  background-color: #53354A;
  color: #fff;
  padding: 2% 3%;
  height: 100px;
  width: 130px;
}

No vertical align:
<div id="section-one-content">
  <ul id="gt" class="meta_data">
    <li><button class="inDB">test</button></li>
    <li><button class="inDB">test<br>test</button></li>
    <li><button class="inDB">test</button></li>
  </ul>
</div>

vertical align:
<div id="section-two-content">
  <ul id="gt" class="meta_data">
    <li><button class="inDB">test</button></li>
    <li><button class="inDB">test<br>test</button></li>
    <li><button class="inDB">test</button></li>
  </ul>
</div>