2

Есть следующая конструкция (генерируемая без моего участия):

<span class="class1">
  <span class="class2">
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span class="class3">Пояснение к чекбоксу</span>
  </span>
</span>

Необходимо убрать обтекание чекбокса текстом, чтобы было как здесь: http://xiper.net/collect/html-and-css-tricks/content/overflow-and-orphans

Способ из ссылки выше работал бы, если бы не мешающий &nbsp;. Есть ли способ справиться с этим? Желательно чистый CSS, без JavaScript.

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

1

2 ответа 2

1

Вариант 1 задать отрицательный верхний отступ на величину размера высоты строки:

input {
  display: block;  
  width: 20px; /*задайте свое необходимое значение */
  float: left;
}

.class3 {
    display: block; 
    overflow: hidden;
    margin-top: -16px; /*высота строки */
}
<span class="class1">
  <span class="class2">
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span class="class3">Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу</span>
  </span>
</span>

Вариант 2 position: absolute к input:

.class2 {
  position: relative;
  padding-left: 20px;
  display: block;
}

input {
  display: block;
  width: 20px;
  position: absolute;
  left: 0;
  top: 0;
}
<span class="class1">
  <span class="class2">
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span class="class3">Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу</span>
  </span>
</span>

Вариант 3 flex:

.class2 {
  display: flex;
}

input {
  display: block;
  width: 20px;
}
<span class="class1">
  <span class="class2">
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span class="class3">Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу</span>
  </span>
</span>

6
  • Посмотрите, пожалуйста (по ссылке), что именно я имею ввиду
    – user64675
    10 окт 2016 в 15:51
  • Я видела ссылку, уточняйте что именно!!! Изображение и под ним текст или изображение слева, текст справа?!
    – SVE
    10 окт 2016 в 15:53
  • Изменил вопрос, внес уточнения
    – user64675
    10 окт 2016 в 15:56
  • Поправила ответ, выбирайте)))
    – SVE
    10 окт 2016 в 16:09
  • Спасибо, самым подходящим для меня кажется 2, но там у первой строки получается отступ(пробел) из-за &nbsp; Нет ли способа его.. игнорировать?)
    – user64675
    10 окт 2016 в 16:09
0

input{display: inline-block; float: left;  width: 20%;}
.class2{width: 400px;display: block;}
.class3{display: inline-block;width: 77%; float:left}
<span class="class1">
  <span class="class2">
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span class="class3">Пояснение к   к чекбоксуПоясне ние к чекб оксуПоясн ение к чек бок  уПоясне ние  к чекбок уПояснение к чек боксуП ояснение  к чекбоксуПояснение к чекбоксуПояснен ие к чекбоксуПоясн ение к чекбоксуclass2</span>
  </span>
</span>

Типа такого?

Ваш ответ

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

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