並排顯示metricalize CSS按鈕

Question

我使用物化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>

我正在使用標准的Materialise CSS，並且未對materialize.css文件進行任何更改。 如何將兩個按鈕並排在同一行並排到圖像的右下角。

我還想將圖像縮放到相同的尺寸，如您所見，當圖像尺寸不同時，卡片的尺寸也不同。

在此先感謝大家。

Answer 1

您應該使用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>

Answer 2

您可以使用Materialize網格系統執行此操作，並根據需要定位元素。 例如，如果將按鈕放在兩個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