Question

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

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

我不知道如何处理这个问题可能有两种方法：

如何缩小与其他元素相匹配的较大元素？
如何让其他元素变大以与更大的元素对齐。

以下是codepen：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

之所以更大，是因为border-bottom .green margin-bottom加.action-button上的.green { background-color: #82BF56; border-bottom: 5px solid #669644; text-shadow: 0px -2px #669644; }：

<li>

您可以强制所有.topbar-menu > li { background: #333; display: inline-block; position: relative; height:50px; }的高度删除额外的填充：

.topbar-menu .action-button {
  position: relative;
  max-height: 10px;
  margin: 0px 10px 5px 0px;
  border-radius: 8px;
}

或者从按钮底部删除边距：

BatchWriter

Answer 2

首先我建议这段代码：

* {
    box-sizing:border-box;
}

这将使您的所有高度和宽度声明不包括占用的总房地产中的填充或边框。如同，它将减小高度/宽度，然后添加填充/边框。因此，如果您发出声明width:200px，无论您添加多少填充/边框，它都将始终为200px。

然后您需要更新代码：

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 3

按如下方式更新CSS（将底部边距减少到5px）：

.topbar-menu .action-button {
    position: relative;
    max-height: 10px;
    margin: 0px 10px 5px 0px;
    border-radius: 8px;
}

Answer 4

.topbar-menu .action-button {
    position: relative;
    max-height: 3px;
    margin: 0px 10px 10px 0px;
    border-radius: 8px;
}
.action-button:active {
    transform: translate(0px, 5px);
    border-bottom: 5px solid black;
}

你制造的transform将其向下移动，同时向下推动空白区域（不是空格:)）。让.aciton-button添加边框会否定这一点。

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

4 个答案: