Как выровнять чекбокс и текст css
Перейти к содержимому

Как выровнять чекбокс и текст css

  • автор:

Как выровнять чексбоксы с их метками в одну строку

введите сюда описание изображения

Есть CheckBoxList .
Проблема в том что если ListItem (текст) много слов то текст отображается одну строку ниже своего чекбокса
Если у некоторых чекбоксов у которых текста меньше отражается нормально
Как решить проблему буду признателен за любые советы
Скрин к примеру так отображается:

Отслеживать
задан 8 дек 2016 в 5:03
1,217 1 1 золотой знак 15 15 серебряных знаков 27 27 бронзовых знаков
А можно код, пожалуйста, и сделать его запускаемым?
8 дек 2016 в 8:22

@Vadim Ovchinnikov, ползуюсь bootstrap, там изменил display:inline-block на inline, стал норм отражать

8 дек 2016 в 8:45
@Vadim Ovchinnikov, хочу сделать это для моего отдельного checkbox-а
8 дек 2016 в 8:46

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Чтобы ничего не съезжало и выглядело аккуратно, можно воспользоваться flex свойствами. Это очень просто и отлично работает.

Суть в том чтобы контейнеру в котором содержится чекбокс и текст к нему (как правило это label) дать следующие свойства:

.checkbox-group

Запустите демку ниже и посмотрите, устраивает ли вас такой результат. Надеюсь что помог. Удачи!

.checkboxes < padding: 5px 10px; max-width: 320px; width: 400px; border: 3px solid cornflowerblue; border-radius: 5px; >.checkbox-group < display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; >.checkbox-group:not(:last-of-type) < margin-bottom: 10px; >.checkbox < cursor: pointer; >.label

Как выровнять checkbox и label?

Подскажите, как сделать, чтобы чекбоксы были по центру по вертикали относитньно label.
vertical-align: middle не помогает.

5e0e2bd498c3b359145696.jpeg

.flex-inner < display: flex; flex-wrap: wrap; list-style: none; >.flex-inner li < margin-top: 10px; >.flex-inner < flex-direction: column; >.flex-inner > li > label < margin-left: 10px; >.flex-inner>li>input
  • Вопрос задан более трёх лет назад
  • 6539 просмотров

Как выровнять чекбокс по первой строке текста из двух строк?

Уважаемые мастера CSS подскажите как выровнять чекбокс по первой строке?
К сожалению я использую не нативный чекбокс, а вот эту библиотеку https://element.eleme.io/ для vue js.

В итоге на выходе получается такой html:

5d1ef8ab26abd625716611.png

У меня это выглядит так.

Ширина p будет ограничена и переносы по-любому нужны!
Как видите выравнивание при переносе строки ( white-space: normal;)
самого чекбокса идет по нижней строке.
Как сделать чтобы выравнивание шло по верхней строке?
Если ставлю
.el-checkbox__label white-space: normal;
vertical-align: top;
>
то чекбокс поднимается на верх, но съезжает в самый верх label и находится не на одной оси со строкой:

5d1efaae215b3806616771.png

На codepen подключил стили из element ui примерно тоже что и у меня рисует:
https://codepen.io/alex-buki/pen/YojMdZ

  • Вопрос задан более трёх лет назад
  • 2074 просмотра

Check Box. Text Align Свойство

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

Возвращает или задает выравнивание текстовой подписи, связанной с элементом управления CheckBox.

public: virtual property System::Web::UI::WebControls::TextAlign TextAlign < System::Web::UI::WebControls::TextAlign get(); void set(System::Web::UI::WebControls::TextAlign value); >;
[System.ComponentModel.Bindable(true)] public virtual System.Web.UI.WebControls.TextAlign TextAlign
public virtual System.Web.UI.WebControls.TextAlign TextAlign
[] member this.TextAlign : System.Web.UI.WebControls.TextAlign with get, set
member this.TextAlign : System.Web.UI.WebControls.TextAlign with get, set
Public Overridable Property TextAlign As TextAlign
Значение свойства

Одно из значений перечисления TextAlign. Значение по умолчанию — Right .

Исключения

Указанное значение не является одним из значений TextAlign.

Примеры

В следующем примере показано, как использовать TextAlign свойство для отображения текстовой метки справа от флажка.

В следующем примере кода используется модель кода с одним файлом и может работать неправильно при копировании непосредственно в файл кода программной части. Этот пример кода необходимо скопировать в пустой текстовый файл с расширением ASPX. Дополнительные сведения о модели кода веб-формы см. в разделе Модель кода страницы ASP.NET Web Forms.

     CheckBox CheckedChanged Example    

CheckBox CheckedChanged Example

Select whether to include tax in the subtotal.

Shopping cart
Item 1 $1.99
Item 2 $2.99
Item 3 $3.99
Subtotal
     CheckBox CheckedChanged Example    

CheckBox CheckedChanged Example

Select whether to include tax in the subtotal.

Shopping cart
Item 1 $1.99
Item 2 $2.99
Item 3 $3.99
Subtotal

Комментарии

Это свойство используется для указания выравнивания текстовой метки, связанной с элементом CheckBox управления . Можно указать, будет ли надпись отображаться справа или слева от флажка. Используйте свойство , Text чтобы указать текст метки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *