如何使用 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 页面的垂直轴对称，方法是将第二个向右移动，如您所见

以便 "Lemma CH" 框的左边距与 "Acronimo IT" 框的左边距对齐。我必须如何更改我的代码才能获得第二张图片中显示的结果？

Answer 1

这是我的解决方案。我已将以下代码添加到 "Lemma CH" 框中。希望能满足您的要求。

float: right;

<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%; float: right;">
  <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>

Answer 2

您可以使用他们的文档..

https://getbootstrap.com/docs/4.0/components/forms/#form-row

我建议您使用 bootstrap 文档，因为无论如何您都在使用 bootstrap。按照您的方式创建表单将需要进一步 CSS 以满足响应式设计。使用文档，bootstrap 会照顾你。

希望对您有所帮助。

Answer 3

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

<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>

如何使用 css 在 html 页面的同一行对齐两个表单域？

How to align two form fields on the same row in html page using css?

css

forms

styling

css-float

border-box