Как выровнять флажок с меткой только с помощью CSS

ProgramBox

Как выровнять флажок с меткой только с помощью CSS

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

#html #css #azure-ad-b2c

#HTML #css #azure-ad-b2c

Вопрос:

Я пытаюсь использовать Azure Active Directory B2C для регистрации пользователей в веб-приложении. Мне нужно добавить несколько флажков с длинными текстовыми метками. Кажется, я не могу выровнять флажки с метками, как показано ниже:

Флажки не выровнены

Проблема в том, что у меня нет доступа к этому коду, по крайней мере, насколько мне известно?

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

Код вводится следующим образом:

 <li class="CheckboxMultiSelect">
  <div class="attrEntry"><label id="extension_Purposeofuse_label" for="extension_Purposeofuse">Purpose of use</label>
    <div class="error itemLevel" role="alert"></div>
    
    <input id="extension_Purposeofuse_a" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_a_option" value="a">
<label id="a_option" for="extension_Purposeofuse_a">a) an investigation into fraud, corruption or theft, provided that the South African Police Service or any other statutory enforcement agency conducts such an investigation;</label>
    
    <input
      id="extension_Purposeofuse_b" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_b_option" value="b">
      <label id="b_option" for="extension_Purposeofuse_b"> b) fraud detection and fraud prevention services;</label>
      
      <input id="extension_Purposeofuse_c" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_c_option"
        value="c">
        <label id="c_option" for="extension_Purposeofuse_c"> c) considering a candidate for employment in a position that requires honesty in dealing with cash or finances;</label>
        
        <input id="extension_Purposeofuse_d" name="extension_Purposeofuse"
        type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_d_option" value="d">
        <label id="d_option" for="extension_Purposeofuse_d"> d) an assessment of the debtors book 
of a business for the purposes of: • the sale of the business or debtors book of that business; or
• any other transaction that is dependent upon determining the value of the business or debtors book of that business;</label>

Развернуть фрагмент кода

Вот ссылка на страницу входа в b2c

Нажмите зарегистрироваться, и вы увидите флажки

Ответ №1:

Попробуйте эти коды.

Редактировать

 label {
  width:90%;
  display:inline-flex;
}

input {
  width:5%;
  display:inline-flex;
}

 <li class="CheckboxMultiSelect">
  <div class="attrEntry"><label id="extension_Purposeofuse_label" for="extension_Purposeofuse">Purpose of use</label>
    <div class="error itemLevel" role="alert"></div>
    
    <input id="extension_Purposeofuse_a" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_a_option" value="a">
<label id="a_option" for="extension_Purposeofuse_a">a) an investigation into fraud, corruption or theft, provided that the South African Police Service or any other statutory enforcement agency conducts such an investigation;</label>
    
    <input
      id="extension_Purposeofuse_b" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_b_option" value="b">
      <label id="b_option" for="extension_Purposeofuse_b"> b) fraud detection and fraud prevention services;</label>
      
      <input id="extension_Purposeofuse_c" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_c_option"
        value="c">
        <label id="c_option" for="extension_Purposeofuse_c"> c) considering a candidate for employment in a position that requires honesty in dealing with cash or finances;</label>
        
        <input id="extension_Purposeofuse_d" name="extension_Purposeofuse"
        type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_d_option" value="d">
        <label id="d_option" for="extension_Purposeofuse_d"> d) an assessment of the debtors book 
of a business for the purposes of: • the sale of the business or debtors book of that business; or
• any other transaction that is dependent upon determining the value of the business or debtors book of that business;</label>

Развернуть фрагмент

1. Я не могу изменить html-код. Это часть Azure ad b2c. Я могу создать пользовательский шаблон, но проблема в том, что код, который запрашивает адрес электронной почты, телефон, флажки и т.д., вводится в шаблон, поэтому я не могу его вообще изменить. Есть ли способ сделать это только с помощью CSS?

2. Как это? Я обновлю ответ, если он сработает. codepen.io/flashbey/pen/xxEjdpq

Ответ №2:

Современный подход — это либо использование flexbox, либо CSS-Grid. Создайте 2 оболочки флажков и меток. Если у grid-template-columns: min-content auto; вас есть столбец с флажком, занимающий столько места, сколько необходимо, а метка занимает оставшуюся доступную ширину.

 .checkbox-wrapper {
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 10px;
}

 <li class="CheckboxMultiSelect">
  <div class="attrEntry">
    <label id="extension_Purposeofuse_label" for="extension_Purposeofuse">Purpose of use</label>
    <div class="error itemLevel" role="alert"></div>

    <div class="checkbox-wrapper">

      <input id="extension_Purposeofuse_a" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_a_option" value="a">
      <label id="a_option" for="extension_Purposeofuse_a">a) an investigation into fraud, corruption or theft, provided that the South African Police Service or any other statutory enforcement agency conducts such an investigation;</label>

      <input id="extension_Purposeofuse_b" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_b_option" value="b">
      <label id="b_option" for="extension_Purposeofuse_b"> b) fraud detection and fraud prevention services;</label>

      <input id="extension_Purposeofuse_c" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_c_option" value="c">
      <label id="c_option" for="extension_Purposeofuse_c"> c) considering a candidate for employment in a position that requires honesty in dealing with cash or finances;</label>

      <input id="extension_Purposeofuse_d" name="extension_Purposeofuse" type="checkbox" aria-labelledby="extension_Purposeofuse_label extension_Purposeofuse_d_option" value="d">
      <label id="d_option" for="extension_Purposeofuse_d"> d) an assessment of the debtors book 
of a business for the purposes of: • the sale of the business or debtors book of that business; or
• any other transaction that is dependent upon determining the value of the business or debtors book of that business;    
      </label>

    </div>

  </div>
</li>

Развернуть фрагмент