Как выровнять три дива, содержащих радиовходы

ProgramBox

Как выровнять три дива, содержащих радиовходы

Post author:admin
Запись опубликована:18 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

У меня есть три дива в форме, которые принимают переключатели в качестве входных данных. В настоящее время с моим css это выглядит так: Пожалуйста, посмотрите эту ссылку

                                     O Text      O Text      O Text
                                O Text      O Textamp;Text O Text
                                        O Text      O Text

Как я могу отредактировать свой css , чтобы сделать так, чтобы переключатели были выровнены по вертикали, а весь набор радиовходов выровнен по центру, что-то вроде этого:

                                     O Text      O Text        O Text
                                    O Text      O Textamp;Text   O Text
                                    O Text      O Text

Это код, который у меня есть

Спасибо!

 <div class="form-group">
            <label for="material" class="text-light">Text</label>
            <div class="radio inline">
                <input type="radio" id="plastic" name="material" value="Plastic">
                <label for="plastic" class="radio-label">Text</label>
            </div>
            <div class="radio inline">
                <input type="radio" id="cans" name="material" value="Cans">
                <label for="cans" class="radio-label">Text</label>
            </div>
            <div class="radio inline">
                <input type="radio" id="paper" name="material" value="Paper">
                <label for="paper" class="radio-label">Text</label>
            </div>
        </div>
        <div class="form-group">
            <label for="relationship" class="text-light">Text</label>
            <div class="radio inline">
                <input type="radio" id="school" name="relationship" value="School">
                <label for="school" class="radio-label">Text</label>
            </div>
            <div class="radio inline">
                <input type="radio" id="family" name="relationship" value="Friends amp;amp; Family">
                <label for="family" class="radio-label">TextText</label>
            </div>
            <div class="radio inline">
                <input type="radio" id="company" name="relationship" value="Company">
                <label for="company" class="radio-label">Company</label>
            </div>
        </div>
        <div class="form-group">
            <label for="frequency" class="text-light">Type</label>
            <div class="radio inline">
                <input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
                <label for="Repeating" class="radio-label">Text</label>
            </div>
            <div class="radio inline">
                <input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
                <label for="One-Time" class="radio-label">Text</label>
            </div>

1. Где находится CSS, который у вас есть в настоящее время?

2. <label for="material" — к какому входу это должно относиться? То же самое для <label for="relationship" и <label for="frequency" — они, по-видимому, связаны по имени с входными данными в DIV элементе, где другая метка относится к тому же input элементу

Ответ №1:

Если вы обернете эти группы форм в контейнер, вы можете установить этот контейнер display: flex , который позволит вам использовать свойства flexbox для выравнивания групп форм по мере необходимости.

 <div class="radio-container">
<fieldset class="form-group">
  <legend id="material" class="text-light">Text</legend>
  <div class="radio inline">
    <input type="radio" id="plastic" name="material" value="Plastic">
    <label for="plastic" class="radio-label">Text</label>
  </div>
  <div class="radio inline">
    <input type="radio" id="cans" name="material" value="Cans">
    <label for="cans" class="radio-label">Text</label>
  </div>
  <div class="radio inline">
    <input type="radio" id="paper" name="material" value="Paper">
    <label for="paper" class="radio-label">Text</label>
  </div>
</fieldset>

<fieldset class="form-group">
  <legend id="relationship" class="text-light">Text</legend>
  <div class="radio inline">
    <input type="radio" id="school" name="relationship" value="School">
    <label for="school" class="radio-label">Text</label>
  </div>
  <div class="radio inline">
    <input type="radio" id="family" name="relationship" value="Friends amp;amp; Family">
    <label for="family" class="radio-label">TextText</label>
  </div>
  <div class="radio inline">
    <input type="radio" id="company" name="relationship" value="Company">
    <label for="company" class="radio-label">Company</label>
  </div>
</fieldset>

<fieldset class="form-group">
  <legend id="frequency" class="text-light">Type</legend>
  <div class="radio inline">
    <input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
    <label for="Repeating" class="radio-label">Text</label>
  </div>
  <div class="radio inline">
    <input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
    <label for="One-Time" class="radio-label">Text</label>
  </div>
</fieldset>
  
</div>

 .radio-container{
  display: flex;
  justify-content: center;
}

1. Я изменил HTML на основе комментария профессора Абронсиуса. Профессор прав в том, что эти дополнительные метки делают HTML недействительным. Предполагая, что это какие-то заголовки групп, я принял решение и добавил наборы полей/легенды в группы форм.

2. Вы имеете в виду контейнер для каждой группы форм или один контейнер для ВСЕХ групп форм?

3. Хороший вопрос. Один контейнер для всех групп форм.

4. что такое наборы полей?

5. Также @Jeff, который просто поместил все группы форм в ОДНУ строку

Ответ №2:

Вы можете использовать display:flex вместе с a width:Xpx для создания выровненных строк. Затем justify-content: center; на весь гибкий контейнер, чтобы центрировать его. Если вы хотите, чтобы текст метки заголовка совпадал с текстом метки радио, вы можете установить радиостанции в абсолютное положение и поместить общее заполнение на все метки

 .container {
  display: flex;
  margin: auto;
  justify-content: center;
}

.radio.inline {
  width: 100px;
}

label {
  padding-left: 25px;
}

input[type='radio'] {
  position: absolute;
}

 <div class="container">
  <div class="form-group">
    <label for="material" class="text-light">Text</label>
    <div class="radio inline">
      <input type="radio" id="plastic" name="material" value="Plastic">
      <label for="plastic" class="radio-label">Text</label>
    </div>
    <div class="radio inline">
      <input type="radio" id="cans" name="material" value="Cans">
      <label for="cans" class="radio-label">Text</label>
    </div>
    <div class="radio inline">
      <input type="radio" id="paper" name="material" value="Paper">
      <label for="paper" class="radio-label">Text</label>
    </div>
  </div>
  <div class="form-group">
    <label for="relationship" class="text-light">Text</label>
    <div class="radio inline">
      <input type="radio" id="school" name="relationship" value="School">
      <label for="school" class="radio-label">Text</label>
    </div>
    <div class="radio inline">
      <input type="radio" id="family" name="relationship" value="Friends amp;amp; Family">
      <label for="family" class="radio-label">TextText</label>
    </div>
    <div class="radio inline">
      <input type="radio" id="company" name="relationship" value="Company">
      <label for="company" class="radio-label">Company</label>
    </div>
  </div>
  <div class="form-group">
    <label for="frequency" class="text-light">Type</label>
    <div class="radio inline">
      <input type="radio" class="freq" name="frequency" id="Repeating" value="Repeating">
      <label for="Repeating" class="radio-label">Text</label>
    </div>
    <div class="radio inline">
      <input type="radio" class="freq" name="frequency" id="One-Time" value="One-Time">
      <label for="One-Time" class="radio-label">Text</label>
    </div>
  </div>

1. Могу ли я каким-то образом получить метку в ряду переключателей?

2. Он находится в ряду. Вы имеете в виду, что хотите, чтобы текст метки заголовка был встроен в текст рядом с переключателями?

3. спасибо, но, кажется, я не совсем ясно выразился. Я хочу, чтобы метка заголовка и радиовходы были в одной СТРОКЕ, прямо сейчас они находятся в одном СТОЛБЦЕ. Итак, формат, на который я смотрю, таков: Header_Label OLabel OLabel OLabel

Метки: Как выровнять три дива, содержащих радиовходы