Member Avatar for dwlamb_001

I'm having a challenge with hanging indents and linebreaks. the essential effect I want is:

Q: Question
A: Answer

Q: Question
A: Answer

For each question and answer, I want a hanging indent:

p.hang { margin-left: 1in; text-indent: -0.25in }

That way if a question or answer wraps to the next line, it will not go to the left margin but line up under Question or Answer. It's working ok for the Q: part but not A.

To keep the Q & A as one block, I'm using <br /> instead of </p> so there's no gap. I've tried defining

ans { position: relative; margin-left: X }
X has been some negative number using px, pt or inches

and using it as a span on the answer portion but to no avail.

Here's the full code of a typical block right now:

<p class="hang">
      Q: Should I have a baby after 35?<br />
      <span class="ans">A: No, 35 children is enough.</span>
    </p>

Is there any way around this? Whoever devised this original premise of a blank line between paragraphs should be shot.

  • 3 Contributors
  • 3 Replies
  • 78 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by dwlamb_001

Recommended Answers

All 3 Replies

Member Avatar for DangerDev

use <br><br> between 2 QA block or another way is using one blank <div></div> with some style between two QA block.

Member Avatar for MattEvans

This seems to work fine for me (Opera):

<html>
  <head>
    <title>Hanging indents..</title>
    <style type="text/css">
      p.question, p.answer
      {
        margin-left:1.2em;
        text-indent:-1.2em;
        padding-bottom:0;
        padding-top:0;
        margin-top:0;
      }
      p.question
      {
        margin-bottom:0;
      }
      p.answer
      {
        margin-bottom:1em;
      }
    </style>
  </head>
  <body>
    <p class="question">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="answer">A: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="question">Q: etc...</p>
    <p class="answer">A: etc....</p>
    <p class="question">Q: etc...</p>
    <p class="answer">A: etc....</p>
  </body>
</html>
Member Avatar for dwlamb_001

Hi Matt,

Thanks! That does the job nicely!

Dan:icon_smile:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.