Выравнивание внутренней формы в CSS: трудности с выравниванием полей ввода и текстовых строк - PullRequest
Новая
       0

Выравнивание внутренней формы в CSS: трудности с выравниванием полей ввода и текстовых строк

1 голос
/ 25 мая 2020

Итак, я создаю форму для сбора личной информации. Три раздела в строке - имя поля текстовой строки, поле input и объяснение и пример текстовой строки, которые я хочу выглядеть так: 

      First Name: INPUT BOX eg. Bob, your given name
         Surname: INPUT BOX eg. Smith, your family name
Languages Spoken: INPUT BOX eg. English, French, Chinese,

Итак, это CSS проблема, которая пока вне меня, поскольку CSS для меня ново. Мне интересно получить три прямых вертикальных выравнивания: двоеточия, поля input и, например,. Крайнее левое поле неровно, как и крайнее правое поле. Я хочу сосредоточить внимание на полях ввода в центре и расположить левую и правую текстовые строки с каждой стороны, по одной строке для каждого элемента ввода. Как go об этом? Необработанный html по умолчанию равен гриппу sh левое поле с неровным внутренним выравниванием.

Спасибо за вашу помощь,

Bill

Sample html: 

<!-- Repeat and customize the 3 line block for each line/input-box/string -->

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Personal Data Collector </title>
  <meta charset="utf-8">
</head>

<body>
  <fieldset>
    <form method="post" action="personal_d_collector.py">
      <h3> Personal Data </h3>
      <lable for="f_name"> First Name: </lable>
      <input type="text" id="f_name" name="f_name">
      <span> eg. Bob, your given name. </span><br>
      <lable for="l_name"> Surname: </lable>
      <input type="text" id="l_name" name="l_name">
      <span> eg. Smith, your family name. </span><br>
    </form>
  </fieldset>
</body>

<html>

Ответы [ 2 ]

1 голос
/ 25 мая 2020

Если вы имеете в виду, что хотите, чтобы поля ввода были выровнены по вертикали, вы можете применить display: inline-block к меткам и определить для него min-width.

Чтобы создать некоторое расстояние между input box и последующие span s, вы можете применить к ним padding-left (однако я бы рекомендовал использовать для этой цели классы). 

label {
  display: inline-block;
  min-width: 100px;
}

form span {
  padding-left: 1em;
}
<form method="post" action="personal_d_collector.py">

  <h3> Personal Data </h3>

  <label for="f_name"> First Name: </label>
  <input type="text" id="f_name" name="f_name">
  <span> eg. Bob, your given name. </span><br>

  <label for="l_name"> Surname: </label>
  <input type="text" id="l_name" name="l_name">
  <span> eg. Smith, your family name. </span><br>

</form>
1 голос
/ 25 мая 2020 
<label for="f_name"> First Name: </label>
<input type="text" id="f_name" name="f_name" style="margin-left:200px;">
<span style="float:right;"> eg. Bob, your given name. </span><br>

<label for="l_name"> Surname: </label>
<input type="text" id="l_name" name="l_name" style="margin-left:200px;">
<span style="float:right;"> eg. Smith, your family name. </span><br>

Это сработает, я думаю, чтобы центрировать поле ввода, лучше сначала поместить его в блок div, а затем отцентрировать, чтобы добиться отзывчивости. 

<div style="text-align:center;">
  <label for="f_name" style="float:left;"> First Name: </label>
  <input type="text" />
  <span style="float:right;"> eg. Bob, your given name. </span><br>
</div>

это еще один способ сделать это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...