Применить поле слева для всех строк текста кнопки ввода HTML

Question

Я не могу выровнять текст ниже первой строки. См. Текст над большой зеленой кнопкой "отправить" справа от ссылки на странице. Я пробовал display: margin-left:15px работает только для первой строки текста, но остальные отображаются по-другому.

Answer 1

margin-left: 15px; отлично работает для меня на сайте, который вы разместили. Просто оберните содержимое, которое вы хотите переместить в div, например: margin-div, и передайте div margin-left: 15px;

Answer 2

Я думаю, что вам нужно использовать сетку, например, начальную загрузку. И отделите ваш ввод (флажок) от вашего текста. Пример в начальной загрузке:

<div class="row">
    <div class="col-xs-2">your checkbox</div>
    <div class="col-xs-10">Your text</div>
</div>

Вам не нужно использовать Bootsrap, но систему таких сеток.

Надеюсь, что это поможет вам:)

Answer 3

Если вы хотите применить выравнивание, вы должны заключить свой текст в <span></span> или же <p></p> и дать style="text-align:right;",

С другой стороны, если вы говорите, что вы хотите текст с отступом (т.е. не текст под флажком), то создайте таблицу там

           <table>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <p>I agree to the terms of the privacy policy of APIS Informationstechnologien GmbH to have my data stored and processed for the purposes of initiating business and improving customer service. My data will not be provided to third parties. At any time, I can disagree with APIS Informationstechnologien GmbH using the data.</p>
                    </td>
                </tr>
            </table>

Answer 4

Это должно сделать это.

.control-group.checkbox {
    padding-left: 20px;
}

.control-group.checkbox > input {
    margin-left: -23px;
}

Это переместит весь .control-group вправо, но вернем его для input элементы.

Answer 5

Я надеюсь, что это поможет кому-то еще!

Вы можете использовать дисплей: блок;

JSFiddle demo

Чтобы достичь того, что вам нужно, используйте приведенный ниже код CSS - примените этот класс CSS к тому, что идет рядом с флажком или переключателем - НО НЕ для флажка или тега радиовхода.

.blockText {
  display: block;
  margin-left: 30px;
  margin-right: 40px;
}

Если вы также хотите, чтобы переключатель / флажок располагался вертикально по центру, вы также можете использовать эти классы.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Пример HTML выглядит следующим образом:

<div class="parent">
<input class="child" type="checkbox" name="abc">
<span class="blockText">1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam necessitatibus
            dignissimos saepe a molestiae, error cupiditate. Dolorem voluptates quae veniam vel ad iusto accusantium atque
            repellat? Qui omnis quia itaque!
 </span>
 </div>

 <br>

 <div class="parent">
 <input class="child" type="checkbox" name="abc2">
<span class="blockText">2. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam necessitatibus
            dignissimos saepe a molestiae, error cupiditate. Dolorem voluptates quae veniam vel ad iusto accusantium atque
            repellat? Qui omnis quia itaque!
 </span>
 </div>