отображение метриализации css кнопок рядом

Question

У меня есть следующий макет для карточек изображений с использованием materialize css:

как вы видите мои кнопки расположены одна над другой, вот мой HTML:

 <div class="col m4 14">
                <div class="card hoverable">
                    <div class="card-image">
                        <a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
                            <img class="materialboxed" src="/uploads/{{imageName}}" width="250">
                        </a>
                    </div>

                    <div class="card-action2">
                        <form action="/user/{{id}}?_method=DELETE" method="POST">
                            <button type="submit" class="btn-floating btn waves-effect waves-light red">
                                <i class="material-icons">delete</i>
                            </button>
                        </form>
                        <form action="/user/{{id}}?_method=DELETE" method="POST">
                            <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                                <i class="material-icons">edit</i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

Я использую стандартную materialize css и не вносил никаких изменений в файл materialize.css. Как можно, чтобы обе кнопки в одной строке и рядом располагались в правом нижнем углу изображения.

Я также хочу масштабировать изображения до одинакового размера, как вы можете видеть, когда изображения не одинакового размера, карты также имеют разные размеры.

Заранее спасибо, ребята.

Answer 1

Вы можете использовать Материализовать сеточную систему , чтобы сделать это и расположить элементы так, как вы хотите.например, если вы поместите кнопки в два col s6 класса, их положение будет располагаться рядом.

измените свой код следующим образом:

<div class="col m4 l4">
            <div class="card hoverable">
            <div class="row">
                  <div class="col s12">
                  <div class="card-image">
                    <a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
                        <img class="materialboxed" src="/uploads/{{imageName}}" width="250">
                    </a>
                </div>
                  </div>
            </div>


                <div class="card-action2">
                <div class="row">
                  <div class="col s6">
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light red">
                            <i class="material-icons">delete</i>
                        </button>
                    </form>
                  </div>
                  <div class="col s6">
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                            <i class="material-icons">edit</i>
                        </button>
                    </form>
                  </div>
                </div>

                </div>
            </div>
        </div>

jsfiddle

Answer 2

Вы должны использовать style="display: inline;", потому что формы являются элементами уровня блока.

                    <form style="display:inline;" action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light red">
                            <i class="material-icons">delete</i>
                        </button>
                    </form>
                    <form style="display: inline;" action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                            <i class="material-icons">edit</i>
                        </button>
                    </form>