如何将这些输入字段与此图像对齐，以便我之间不会有间隙

Question

我想要MAP PO并在上面的输入字段下方选择状态，两者之间没有间隙，图像正在中断流程。

图片：

Answer 1

您可以使用此代码

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="row">
   <div class="col">
   <form>
  <div class="form-row">
    <div class="form-group col-4">
      <label for="inputState">Select Hardware</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-4">
      <label for="inputCity">Serial Tag</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-4">
      <label for="inputZip">Assset No.</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
    <div class="form-row">
    <div class="form-group col-4">
      <label for="inputCity">Map No</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-4">
      <label for="inputState">Slect Status</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>

  </div>
</form>
   </div>
   <div class="col-auto">
     <img src="http://via.placeholder.com/150x150" alt="" />
   </div>
</div>

Answer 2

如果没有看到任何代码，就很难直接回答。

但是，我建议您将position: relative应用于 MAP PO 和选择状态，以及它们的输入字段（可能将它们全部包含在{ {1}}并将该职位应用于该容器。）

然后，您将能够同时使用<div>和top以及bottom和margin-bottom属性来调整定位。

有关定位的更多信息，请参阅：https://www.w3schools.com/css/css_positioning.asp。

最好使用margin-top和%等相对单位进行定位，因为这样可以实现响应式布局。