問題を単純化するために、2x2 CSS グリッド div があるとします。次のコード スニペットに示すように、グリッド テンプレートを使用して、これら 4 つのセル内の 3 つの div (クラス名: "btn"、"title"、および "info") のサイズを変更しました。 (3 番目の div class="info" を維持するために 2 行目の 2 つの列をマージします)
最初の div (class="btn") のアスペクト比は 1/1 です。そこで高さを 10vh に設定すると正方形になります。
＃＃＃私の質問＃＃＃しかし、最後の div でその input タグを使用すると、グリッドの中心線が予期せず移動してしまいます。グリッドの 2 列目には十分なスペースがあり、移動する必要はないと思うので、これは予想外です。
問題を確認するには、以下のコード スニペットから input タグを削除して、違いを確認してください。
リーリー リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
に追加するだけですalign-self: startをinfoクラス答えを見つけました、
入力マーク幅の値を設定する必要があります。任意のパーセンテージに設定しましたが、正常に動作します
リーリー