如何使按钮适合CSS网格容器的单元格?

时间:2019-09-30 07:39:27

标签: css css-grid

我有这样的东西:

<div class="content" >
  <div class="nested">
        <div class="one">something</div>
        <div class="two">something something</div>
        <div class="three">..</div>
        .....

        <div class="eight"><button class="buy_now_button">Buy Now!</button></div>
  </div>
</div>
.buy_now_button
{
  place-self: center stretch;
}

我想在第八个div拉伸按钮并使它自己适合所包含的单元格。我的代码对按钮没有影响,仅保留在单元格的左上方。不胜感激!

我一直在关注:https://css-tricks.com/snippets/css/complete-guide-grid/

2 个答案:

答案 0 :(得分:1)

不知道我是否理解正确,但是如果您只想拉伸按钮,请使用:

width: 100%;

.content {
  background-color: green;
}

.nested {
  background-color: yellow;
  width: 50%;
}

.buy_now_button {
  width: 100%;
}
<div class="content" >
  <div class="nested">
        <div class="one">something</div>
        <div class="two">something something</div>
        <div class="three">..</div>
        <div class="eight"><button class="buy_now_button">Buy Now!</button></div>
  </div>
</div>

答案 1 :(得分:0)

width:100%有效,但是如果按钮不在网格中,它将占据文档的100%宽度。 所以,最好写

button {
  justify-self:stretch;/*width:100%;*/
}