Выравнивание текста рядом с флажком

Question

Простой вопрос, и, несомненно, простое решение. У меня есть много проблем с поиском, несмотря на то, что вы некоторое время искали SO и Google.

Все, что я хочу сделать, это взять фрагмент текста «Я заинтересован в расширенном листинговом или премиальном профиле (член нашей команды будет оперативно реагировать с дополнительной информацией)» и выравнивая его справа от флажка (с выравниванием текста слева), но не обертывания вокруг него, как сейчас.

Вот мой JSFiddle

кода (с использованием PureCSS для укладки):

<form class="pure-form pure-form-aligned"> 
        <fieldset> 
         <div class="pure-control-group"> 
          <label for="name">Product Name</label> 
          <input id="name" type="text" placeholder="Username"> 
         </div> 

         <div class="pure-control-group"> 
          <label for="password">Contact Name</label> 
          <input id="password" type="text" placeholder="Password"> 
         </div> 

         <div class="pure-control-group"> 
          <label for="email">Contact Email</label> 
          <input id="email" type="email" placeholder="Email Address"> 
         </div> 

         <div class="pure-control-group"> 
          <label for="foo">Website</label> 
          <input id="foo" type="text" placeholder="Enter something here..."> 
         </div> 

         <div class="pure-control-group"> 
          <label for="foo">Description:</label> 
          <textarea id="description" type="text" placeholder="Enter description here..."></textarea> 
         </div>      

         <div class="pure-controls"> 
          <label for="cb" class="pure-checkbox"> 
           <input id="cb" type="checkbox"> 
           I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) 
          </label> 

          <button type="submit" class="pure-button pure-button-primary">Submit</button> 
         </div> 
        </fieldset> 
       </form> 

Любая помощь будет оценена. Благодарю.

Answer 1

Вот простой способ. Возможно, есть и другие.

<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>"> 
<div style="margin-left: 25px;"> 
    I'm interested in an enhanced listing or premium profile, 
    (a member of our team will respond promptly with further information) 
</div> 

Я использовал div чтобы «заблокировать» структура текста и переместил его вправо. float: left на input сохраняет флажок слева от текста (не выше). margin-top на input изменяет верхнее выравнивание с текстом.

fiddle.

Answer 2

Попробуйте повернуть флажок влево, а затем оберните текст в div с помощью «переполнения: скрыто». Возможно, добавьте немного прописных букв, как я сделал ниже, чтобы придать тексту некоторую передышку из флажка (дополнение дополняет это дополнение).

<div class="pure-controls"> 
    <label for="cb" class="pure-checkbox"> 
    <input id="cb" type="checkbox" style="float: left;"> 
     <div style="overflow: hidden; padding: 0px 0px 0px 5px;"> 
      I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information) 
     </div> 
</label> 
    <button type="submit" class="pure-button pure-button-primary">Submit</button> 
</div> 

Answer 3

Это метод, который я использовал. Это работало лучше для меня, чем многие другие методы, которые я нашел на SO.

LABEL.indented-checkbox-text 
 
{ 
 
    margin-left: 2em; 
 
    display: block; 
 
    position: relative; 
 
    margin-top: -1.4em; /* make this margin match whatever your line-height is */ 
 
    line-height: 1.4em; /* can be set here, or elsewehere */ 
 
}

<input id="myinput" type="checkbox" /> 
 
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>