使HTML按钮彼此对齐

Question

我是否可以在检索json文件的右侧显示 Get Maneuver （获取操作）按钮，以便用户不必一直向下滚动， 获取机动右侧的获取箭头，但getArrows()的结果低于获取箭头。

类似这样的东西：

function getManeuver() {
  var url = "https://maps.googleapis.com/maps/api/directions/json?origin=" + document.getElementById('origin-input').value + "&destination=" + document.getElementById('destination-input').value + "&key=?";
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    success: function(data) {
      console.log('success', data);
      drawTable(data);

    }
  });

  function drawTable(data) {
    for (var i = 0; i < data.routes[0].legs[0].steps.length; i++) {
      drawRow(data.routes[0].legs[0].steps[i]);
    }

  }

  function drawRow(steps) {
    var row = $("<tr />")
    $("#personDataTable").append(row);

    row.append($("<td>" + steps.maneuver + "</td>"));
  }

}

function getArrows() {
  $('#personDataTable td').each(function(idx, element) {
    var text = $(element).text();
    $('#Arrows').append(text + ' , ');

  });
}

function ChangetoArrows() {
  var str = document.getElementById("Arrows").innerHTML;
  var res = str.replace(/undefined|turn-right|turn-slight-left|turn-slight-right|turn-left/gi, function ChangetoArrows(x) {

    if (x == 'undefined') {
      return x = '&uarr;';
    }
    if (x == 'turn-right') {
      return x = '&rarr;';
    }
    if (x == 'turn-slight-right') {
      return x = '&rarr;';
    }
    if (x == 'turn-left') {
      return x = '&larr;';
    }
    if (x == 'turn-slight-left') {
      return x = '&larr;';
    } else {
      return x;
    } //must need
  });

  document.getElementById("Arrows").innerHTML = res;
}

.button {
  background-color: #4CAF50;
  /* Green */
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button2 {
  background-color: #008CBA;
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button3 {
  background-color: Blue;
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button4 {
  background-color: Yellow;
  color: black;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<button class="button" onclick="myFunction()">Retrieve the Json File</button>
<p><a id="demo">Json</a></p>

<button class="button2" onclick="getManeuver()">Get Maneuver</button>
<table id="personDataTable">
  <tr>
    <th>Maneuver</th>
  </tr>
</table>

<button class="button3" onclick="getArrows()">Get Arrows</button>
<p id="Arrows"></p>

<button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>

Answer 1

一种解决方案是将“ column”部分包装在div中，并为它们提供一些CSS规则（请参见 .col CSS选择器）

.col {
  display: inline-block;
  width: 30%;
  vertical-align: top;
}

.button {
  background-color: #4CAF50;
  /* Green */
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button2 {
  background-color: #008CBA;
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button3 {
  background-color: Blue;
  color: white;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button4 {
  background-color: Yellow;
  color: black;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="col">
  <button class="button" onclick="myFunction()">Retrieve the Json File</button>
  <p><a id="demo">Json</a></p>
</div>    

<div class="col">
  <button class="button2" onclick="getManeuver()">Get Maneuver</button>
  <table id="personDataTable">
    <tr>
      <th>Maneuver</th>
    </tr>
  </table>
</div>

<div class="col">
  <button class="button3" onclick="getArrows()">Get Arrows</button>
  <p id="Arrows"></p>

  <button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>
</div>