#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. Ссылка не работает.
2. Я обновил ссылку. Пожалуйста, нажмите на кнопку «зарегистрироваться», чтобы просмотреть страницу
Ответ №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>
Комментарии:
1. Я не могу добавить div «checkbox-wrapper» в html. Я вообще не могу редактировать html. Есть ли способ сделать это только с помощью css? Формат html выглядит следующим образом: