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:
Comments
Post a Comment