1

здравствуйте! у меня такой вопрос: делаю элементы формы: checkbox и radio, при однострочной подписи все нормально, а при многострочной - все выглядит убого. введите сюда описание изображения

Как сделать так, чтобы текст ВЕСЬ выравнивался по Lorem Ipsum, а не залезал под checkbox? Как в Worde введите сюда описание изображения

Использую элементы input type="checkbox" и label

1
  • Кидайте код сюда 7 сен 2015 в 6:03

2 ответа 2

2

Вижу только такой выход:

<style>
input,label{
    float:left;
}
input{
    width: 20px;
}
label{
    width: 300px;
}
</style>
<input id="1" type="checkbox" />
<label for="1">qwerqwerqwer qewrqwerer ewrqwerqwerqwer werqwerqwe rqwer qwer qwe rqw er erererqewrqwerq ewrqwerqwerqwerqwerqwe r</label>

https://jsfiddle.net/o82s8wzc/

2
  • СПАСИБО!!!! ЗАРАБОТАЛО!=))))))
    – Мария
    7 сен 2015 в 6:24
  • @Мария, если заработало, то ответ следует отметить как решение вопроса.
    – Visman
    7 сен 2015 в 10:59
2

Чтобы не ограничивать label фиксированной шириной можно решить вопрос более правильно: поместить input в label и задать правильное позиционирование и отступы.

Пример смотрите ниже.

label {
  padding-left: 26px;
  position: relative;
  display: block;
}
input[type=checkbox] {
  position: absolute;
  left: 0;
}
<label for="checkbox-1">
  <input type="checkbox" id="checkbox-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
  has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label>
<label for="checkbox-2">
  <input type="checkbox" id="checkbox-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</label>
<label for="checkbox-3">
  <input type="checkbox" id="checkbox-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
  has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label>

1
  • Полностью согласен! @Мария, стоит пере-отметить, если тут так можно делать.
    – borodatych
    8 сен 2015 в 12:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.