Question

我想将元素在div中的位置设置为与同一div中另一个元素相同的高度。最初，将div中的所有元素放置在div中正确的高度（用于以下代码）

<div class="main">
    <a href="link"> link </a>
    <div class="menu">
        <div class="wrapper">
            <div>
                <button><svg class="icon"></button>
            </div>
        </div>
    </div>
</div>

.main {
    display: flex;
    flex: 0 0 0;
    justify-content: space-between;
    white-space: nowrap;

    > * {
        display: block;
    }
    a {
        color: #000000;
        text-decoration: none;
    }

    .menu {
        margin-left: 8px;
        .icon {
            width: 14px;
        }
    }
}
.wrapper {
    position: relative;
}

.contents {
      position: absolute;
      background-color: white;
  }

现在，为了在svg周围具有可点击区域，我向包含svg的div添加类“ icon_area”，如下所示，

<div class="icon_area">
    <button><svg class="icon"></button>
</div>
.wrapper {
    position: relative;
    .icon_area {
        padding: 10px;
    }
}

完成此操作后，div内的元素（之前并排出现，但稍稍高于）。

预期：两个元素的高度都相同。有人可以帮我解决这个问题。谢谢。

Answer 1

很明显，它是由10px padding值“提高”的。由于.wrapper具有position: relative，因此您可以添加bottom: -10px来弥补（或margin-bottom: -10px）

如何在div中将元素放置在与同一div中另一个元素相同的高度上

1 个答案: