css - 如何使用 css 对齐 html 页面中同一行的两个表单字段？

Question

我有这个 html 文本

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="glossary-form"></div>

<div class="form-group" style="display:inline-block; width:48%;padding-right: 5%;">
  <label for="glossary_entry_input_1">Lemma IT</label>
  <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">              
</div>

<div class="form-group" style="display:inline-block; width:48%; padding-left: 5%;">
		<label for="glossary_entry_input_2">Lemma CH</label>
		<input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">              
</div>

<div class="form-group">
                    <label for="glossary_entry_input_3">Acronimo IT</label>
                    <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
                    <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">              
            </div>  

</div>

生成以下表单字段，如您所见，在一行上对齐

我想通过将第二个向右移动，将它们对称地显示到我的 html 页面的垂直轴上，如您所见

因此“引理 CH”框的左边距与“Acronimo IT”框之一对齐。 我必须如何更改我的代码才能获得第二张图片中显示的结果？

Answer 1

向右浮动不是正确的解决方案。试试这个。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="glossary-form"></div>
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label for="glossary_entry_input_1">Lemma IT</label>
      <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label for="glossary_entry_input_2">Lemma CH</label>
      <input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">
    </div>
  </div>

</div>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label for="glossary_entry_input_3">Acronimo IT</label>
      <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il
        lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
      <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">
    </div>

  </div>
</div>
</div>