Align long text to start each row in the same position - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Text

Description

Align long text to start each row in the same position

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>List items in survey</title> 
  <style>
div.survey-answer {
   display:table;
}

label {<!--from  w  w w. j  a va2  s . c  o  m-->
   display:table-cell;
   padding-left:11px;
}
</style> 
 </head> 
 <body> 
  <div class="survey-answer"> 
   <input type="checkbox" id="survey-answer-1"> 
   <label for="survey-answer-1"> <b>ANSWER 1</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at metus a pharetra. Phasellus sit amet metus non arcu sodales hendrerit. Etiam dictum id magna pulvinar laoreet. Mauris sodales sapien non arcu molestie molestie. Proin blandit varius nisi, vel suscipit est tempor quis. Morbi posuere metus sit amet sem ultrices, eget rutrum diam aliquet. Donec vel sem eu turpis convallis aliquam vitae eget justo. Vestibulum vel ornare lacus. Nulla massa massa, tincidunt ac tristique ut, euismod a urna. Nam tincidunt orci at sapien consectetur, non gravida orci bibendum. </label> 
  </div> 
  <br> 
  <div class="survey-answer"> 
   <input type="checkbox" id="survey-answer-2"> 
   <label for="survey-answer-2"> <b>ANSWER 2</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at metus a pharetra. Phasellus sit amet metus non arcu sodales hendrerit. Etiam dictum id magna pulvinar laoreet. Mauris sodales sapien non arcu molestie molestie. Proin blandit varius nisi, vel suscipit est tempor quis. Morbi posuere metus sit amet sem ultrices, eget rutrum diam aliquet. Donec vel sem eu turpis convallis aliquam vitae eget justo. Vestibulum vel ornare lacus. Nulla massa massa, tincidunt ac tristique ut, euismod a urna. Nam tincidunt orci at sapien consectetur, non gravida orci bibendum. </label> 
  </div>  
 </body>
</html>

Related Tutorials