Как сделать так, чтобы кнопка соответствовала ячейке контейнера CSS? - PullRequest
Новая
       9

Как сделать так, чтобы кнопка соответствовала ячейке контейнера CSS?

0 голосов
/ 30 сентября 2019

У меня есть что-то вроде этого: 

<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 /

1 Ответ

1 голос
/ 30 сентября 2019

Не знаю, правильно ли я понимаю, но если вы просто хотите растянуть кнопку, используйте: 

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>
...