Как выровнять два поля формы в одной строке HTML-страницы с помощью CSS?

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

Вы можете использовать их документацию ..

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

Я бы посоветовал использовать документы по загрузке, так как вы все равно используете загрузку.Создание формы, как вы будете нуждаться в дальнейшем CSS, чтобы удовлетворить адаптивный дизайн.Используйте документы, и начальник позаботится о вас.

Надеюсь, это поможет.

Answer 2

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

Answer 3

Вот мое решение.Я добавил следующий код в поле "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>