我有这样的东西:
<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/
答案 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%;*/
}