javascript - 如何使列表项具有均匀大小的高度

Question

我有一个使用 display:inline-block 水平排列的元素列表。

一个元素的高度比其他元素大，它会溢出。我怎样才能使它与其他人具有相同的高度，并使其边距或填充属性保持在范围内。

我不知道如何解决这个问题，也许有两种方法:

• 如何缩小较大的元素以适应其他元素？

• 如何让其他元素变大以与更大的元素对齐。

这是代码笔:http://codepen.io/anon/pen/domBYj

  <ul class="topbar-menu">
    <li><a> 1000 points </a></li>
    <li><a class="action-button green"> Get Points </a></li>
    <li><a> Level 10 </a></li>
    <li><a> Buddies </a></li>
  </ul>

这是菜单:

.topbar-menu {
    display: table;
    margin: 1em auto;
}

.topbar-menu > li {
    background: #333;
    display: inline-block;
    position: relative;
}

.topbar-menu a {
    color: #eee;
    display: block;
    padding: 1em 2em;
    text-decoration: none;
}

这是更大的元素:

.topbar-menu .action-button {
    position: relative;
    margin: 0px 10px 5px 0px;
    border-radius: 8px;
}
.green {
    background-color: #82BF56;
    border-bottom: 5px solid #669644;
    text-shadow: 0px -2px #669644;
}

Answer 1

首先我建议这段代码:

* {
    box-sizing:border-box;
}

这将使您所有的高度和宽度声明在其占用的总空间中不包括填充或边框。就像，它会减少高度/宽度，然后添加填充/边框。因此，如果声明 width:200px，则无论添加多少填充/边框，它始终为 200px。

然后你需要更新你的代码:

/* Topbar Menu */
* {
  box-sizing:border-box;
}
ul.topbar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar-menu {
    display: table;
    margin: 1em auto;
}

.topbar-menu > li {
    background: #333;
    display: inline-block;
    position: relative;
}

.topbar-menu a {
    color: #eee;
    display: block;
    padding: 1em 2em;
    text-decoration: none;
}

/* Buttons */

.topbar-menu .action-button {
    position: relative;
    border-radius: 8px;
}
.green {
    background-color: #82BF56;
    border-bottom: 5px solid #669644;
    text-shadow: 0px -2px #669644;
}
.topbar-menu a.green {
    padding-bottom: calc(1em - 5px); /* Take 5px off the padding to accomodate the extra border on this particular item */
}

.topbar-menu a.green:hover,
.topbar-menu a.green:focus{
    background: #82BF56;
}

.action-button:active {
    transform: translate(0px, 5px);
    border-bottom: 0px solid;
}

<div>
  <ul class="topbar-menu">
    <li><a> 1000 points </a></li>
    <li><a class="action-button green"> Get Points </a></li>
    <li><a> Level 10 </a></li>
    <li><a> Buddies </a></li>
  </ul>
</div>