保持列表按钮相同对齐

Question

我正在尝试使列表按钮保持相同的对齐，但如果文本是长按钮，我不知道该怎么做按钮的 position 会自动更改

 <html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="revisit-after" content="1 days">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://asd.online/css/index.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <title>YeniPDF</title>
      </head>
      <body>
      <div class="container">
         <ul class="list-unstyled row" style="text-align:center;">

        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="

a

" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
      </ul>
      </div>
      </body>
    </html>

我没有使用任何特定的 css 只是引导程序 4 这是 js fiddle https://jsfiddle.net/ygoqmb14/2/

Answer 1

尝试为.hizala class 添加最小高度

.hizala {
  min-height: 130px;
}