Question

我制作了一个Codepen示例，很好地说明了我的问题：https://codepen.io/anon/pen/KGQNrP （链接将在同一窗口中打开）

我可以根据需要创建任意数量的包装器，但是超链接本身必须位于按钮包装器中。所以我认为我的标记看起来像这样：

<div class="triggered">
  <div class="button">
    <a href="">Small</a>
  </div>
  <div class="button">
    <a href="">Large Large Large</a>
  </div>
</div>

我在flex和grid上做了很多尝试，但是我无法使其正常工作。
我不想使用width，max-width，table-row或类似的内容。
Flex或grid会非常好，至少我真的很想知道如何使用flex或grid完成它。

Answer 1

只需创建容器元素inline-block和链接本身block…？

.triggered {
  display: inline-block;
  & .button {
    margin: 1rem 0;

    & a {
      background-color: #000;
      color: #fff;
      padding: 1rem;
      display: block;
    }
  }
}

https://codepen.io/anon/pen/YJeNxd

Answer 2

您可以将.triggered设为inline-flex，并将flex-direction设置为column，并制作a标签display:block;，这样就可以填充整个.triggered

的宽度

.triggered {
  display:inline-flex;
  flex-direction:column;  

  & .button {
    margin: 1rem 0;  

    & a {
      background-color: #000;
      color: #fff;
      padding: 1rem;
      display: block;
    }
  }
}

使按钮（超链接）与父包装中的子按钮大小相同，但没有宽度或最大宽度

2 个答案: