Question

我试图编写两个彼此相邻的按钮。它们应具有相同的宽度/较小的元素应获得最大子元素的宽度。而且它们必须尽可能灵活地包装。（响应式）

我为父级尝试了display: inline-block，但是显然，这仅适用于相互之间的元素（不并排）。我也尝试过使用display: inline-flex和flex-direction，但是我最后还是遇到了并排的元素。
使用display: grid非常简单，但是我无法使其灵活和响应迅速。

由于这个问题非常具体（我认为），所以我制作了一个密码笔：https://codepen.io/obendev/pen/vYYJGxj

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.buttons-grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 4rem;
}

.button a {
  align-items: center;
  background-color: #ffcf2f;
  border-radius: 80px;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 1.375rem 2.75rem;
  text-transform: uppercase;
  transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (hover: hover) {
  .button a:hover {
    background-color: #0562af;
  }
}
.button a svg {
  fill: currentColor;
  height: 1rem;
  margin-right: 0.375rem;
  width: 1rem;
}

.site-width {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding: 2rem 3.125rem;
}

a {
  color: currentColor;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
}

<div class="site-width">
    <div class="buttons">
        <div class="button">
            <a href>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
                </svg>
                <span>short</span>
            </a>
        </div>
        <div class="button">
            <a href>looooooooooooooong</a>
        </div>
    </div>

    <div class="buttons-grid">
        <div class="button">
            <a href>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
                </svg>
                <span>short</span>
            </a>
        </div>
        <div class="button">
            <a href>looooooooooooooong</a>
        </div>
    </div>
</div>

最下面的“解决方案”是最终结果，我试图使它看起来像这样，这就是我之前谈到的网格解决方案。

元素宽度与最宽的子元素一样宽，并排放置而不占用全部宽度

0 个答案: