0

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

Нужно сделать так, чтобы все строки label начинались на том же уровне, что и первая строка. В данный момент вторая строка начинается под радиобаттоном, нужно сдвинуть её вправо до уровня начала первой строки.

<div data-ng-repeat="layer in listLayers" class="ng-scope">
  <label class="ng-binding">
    <input type="radio" data-ng-model="layerSelect.id" value="269961" class="ng-pristine ng-untouched ng-valid" name="724">Test_test_test_test_test_test_test_test_test_test_test_ test_test_test_test_test_test_test_test_test_ (0)
  </label>
  <br>
</div>
8
  • 2
    Могу предложить следующее решение... Оберните текст в какой нибудь элемент, например <span style="display: block;">. Commented 10 нояб. 2015 в 7:31
  • @AlexeyLemesh, и чем же block поможет?
    – Qwertiy
    Commented 23 нояб. 2015 в 17:20
  • @Qwertiy тем, что задаст левую границу текста ... Commented 24 нояб. 2015 в 7:30
  • @AlexeyLemesh, но тогда радиобаттон окажется выше блока, если не применить к нему float или абсолютное позиционирование.
    – Qwertiy
    Commented 24 нояб. 2015 в 8:00
  • @Qwertiy, для этого есть css ... Commented 24 нояб. 2015 в 8:21

3 ответа 3

1

label {
  display: block;
  padding-left: 16px;
  /* position is not required */
}

input {
  position: absolute;
  margin-left: -16px;
}
<label>
  <input type="radio" name="r">Текст
</label>
<label>
  <input type="radio" name="r">Ещё текст
</label>
<label>
  <input type="radio" name="r">Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <input type="radio" name="r">Текст
</label>
<label>
  <input type="radio" name="r">Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <input type="radio" name="r">Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>

0

Всё оказалось просто, разнёс на два отдельных тега и сделал флоат лефт с фиксацией ширины у лейбла

1
  • В таком случае придётся заполнять id, чтобы работало for.
    – Qwertiy
    Commented 23 нояб. 2015 в 17:28
-1

label {
  display: block;
  text-indent: -16px;
  padding-left: 16px;
}

span {
  text-indent: 0;
  display: inline-block;
  width: 16px;
  vertical-align: middle;
}

input {
  margin: 0;
}
<label>
  <span><input type="radio" name="r"></span>Текст
</label>
<label>
  <span><input type="radio" name="r"></span>Ещё текст
</label>
<label>
  <span><input type="radio" name="r"></span>Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <span><input type="radio" name="r"></span>Текст
</label>
<label>
  <span><input type="radio" name="r"></span>Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>
<label>
  <span><input type="radio" name="r"></span>Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста... Много много много текста...
</label>

1
  • За что минусы-то?
    – Qwertiy
    Commented 9 мар. 2016 в 20:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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