Выравнивание Флажок справа

Question

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

<div class="container"> 
    <div class="row center"> 
    <p>Recurring:</p> 
    <form action="#"> 
     <input type="checkbox" id="check1"> 
     <label for="check1"></label> 
    </form> 
    </div> 
</div> 

Answer 1

Дайте p элемент и элемент form свойство display:inline-block;.

Как элементы p, так и формы имеют свойство display:block; по умолчанию.

p{ 
 
    display:inline-block; 
 
} 
 
form{ 
 
    display:inline-block; 
 
}

<div class="container"> 
 
    <div class="row center"> 
 
    <p>Recurring:</p> 
 
    <form action="#"> 
 
     <input type="checkbox" id="check1"> 
 
     <label for="check1"></label> 
 
    </form> 
 
    </div> 
 
</div>

Answer 2

Или вы можете добавить "Периодическое" текст на этикетке like this

<div class="container"> 
    <div class="row center"> 
    <form action="#"> 
     <label for="check1">Recurring</label> 
     <input type="checkbox" id="check1"> 
    </form> 
    </div> 
</div> 

Answer 3

Использование inline-block дивы для выравнивания элементов инлайн:

https://jsfiddle.net/Bendrick92/0o6mwdtz/

.left, .right { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="row center"> 
 
    <div class="left"> 
 
     <p>Recurring:</p> 
 
    </div> 
 
    <div class="right"> 
 
     <form action="#"> 
 
      <input type="checkbox" id="check1"> 
 
      <label for="check1"></label> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>