css - How to position a block of text on the same line -


a following html markup creates qa section in site. want way - sentence in q section should positioned on same line "q" symbol; sentences in section should moved right , each sentence should start new line. this: desired result http://i44.tinypic.com/i22d5j.png

but looks way: actual result http://i43.tinypic.com/2afkdpj.png

 <html>     <head>     <style type="text/css">      .qa b {         font-size: 50px;     }      .qa .answer_box {         margin-left: 90px;         display: inline;     }     .qa p {          font-size: 25px;         }       </style>     </head>     <div class="qa">             <div class="question">                 <b>q</b>                 <p>                                  believe in seo?                 </p>             </div>              <div class="answer">                         <b>a</b>                     <div class="answer_box">                                     <p>                                          yes                     </p>                     <p>                         seo powerful technique increase site ranking in google.                     </p>                     <p>                         cool , so so.                     </p>                 </div>             </div>         </div> 

would grateful help.

use float , padding/margin maneuver, b tag replaced strong , place within first p tag per block:

p strong {     float: left;     margin-left: -1.5em;     font-size: 3em; } p {     padding-left: 5em; }  <p>     <strong>q:</strong>     lorem ipsum dolor sit amet, consectetur adipiscing elit. sed non turpis cursus, viverra libero a, ultricies enim. cras quis ornare urna, condimentum luctus lorem. aliquam et odio et magna pretium molestie. fusce pulvinar nisi id mi pharetra scelerisque. sed mollis accumsan tincidunt. quisque libero erat, gravida sed rutrum et, volutpat non dui. etiam eget leo in ipsum consectetur iaculis. vestibulum dictum leo quis tristique feugiat. donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. integer ultricies ultrices ornare. duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. nam fermentum suscipit mauris, nec volutpat augue condimentum ac. mauris consequat ante sed lacus vehicula scelerisque. in non gravida ligula, @ dapibus ligula. </p> <p>     <strong>a:</strong>     lorem ipsum dolor sit amet, consectetur adipiscing elit. sed non turpis cursus, viverra libero a, ultricies enim. </p> <p>cras quis ornare urna, condimentum luctus lorem. aliquam et odio et magna pretium molestie. fusce pulvinar nisi id mi pharetra scelerisque. sed mollis accumsan tincidunt. quisque libero erat, gravida sed rutrum et, volutpat non dui. etiam eget leo in ipsum consectetur iaculis. vestibulum dictum leo quis tristique feugiat. donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. integer ultricies ultrices ornare. duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. nam fermentum suscipit mauris, nec volutpat augue condimentum ac. mauris consequat ante sed lacus vehicula scelerisque. in non gravida ligula, @ dapibus ligula.</p> 

http://jsfiddle.net/userdude/czjhu/5/

keep in mind you'll want use classes add these styles, not element-level selectors p , p strong. demonstration purposes only.

note

for claiming not op asked for, here appears in every browser @ with:

enter image description here


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -