Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

默认情况下，内联元素与第一个文本行对齐。您可以执行以下操作：

您可以设置
```
li {
  display: inline-block;
  vertical-align: top;
}
```
这样，您的<li>元素（以及包含的按钮）将与其容器的顶部对齐
请勿使用<h2>作为<ul> no other child element than <li> is allowed for <ul>的直接子女（请参阅MDN for more information）
检查您的标记，并确保没有其他CSS规则覆盖您的垂直对齐

这是一个工作示例：

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 2

试试这个

＆＃13;

.flex-container {
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    }

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

＆＃13;

 
  
      <h2 style="color:#859900; padding:30px" >No Meta Data</h2>
 <div id="section-one-content flex-container">
      <button class="flex-item inDB">a</button>
      <button class="flex-item inDB">b</button>
      <button class="flex-item inDB">c</button>
  </div>

＆＃13;

Answer 3

你可以使用min-height属性来完成，请尝试像这样的min-height

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

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

3 个答案: