SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2011
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling p so it appears inline

    I tried styling a class (called sameline) applied to <p> so that it appears inline, but it didn't work:

    Code:
    p .sameline {
    display: inline;
    }
    html is:
    HTML Code:
    <p class="sameline">
    What am I doing wrong? (In case I am using the wrong terminology, I want the text in the <p> tag to appear on the same line as the preceding element.)

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ShinVe View Post
    I tried styling a class (called sameline) applied to <p> so that it appears inline, but it didn't work:

    Code:
    p .sameline {
    display: inline;
    }
    html is:
    HTML Code:
    <p class="sameline">
    What am I doing wrong? (In case I am using the wrong terminology, I want the text in the <p> tag to appear on the same line as the preceding element.)
    Get rid of the space in "p .sameline"

    p.sameline means <p class="sameline">
    p .sameline means <p><some-other-element class="sameline">

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2011
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That actually didn't fix my problem, but it's good to know. I found out that the div my text was in was block level element. I tried giving it an id and setting it to inline, but the text inside (along with the inline <p>) still did not go the same line as the previous element. I eventually tried a span, and that worked, but I was hoping to figure out why the div set to display: inline didn't work.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ShinVe View Post
    Thanks. That actually didn't fix my problem, but it's good to know. I found out that the div my text was in was block level element. I tried giving it an id and setting it to inline, but the text inside (along with the inline <p>) still did not go the same line as the previous element. I eventually tried a span, and that worked, but I was hoping to figure out why the div set to display: inline didn't work.
    The problem is probably that it is surrounded by block-level elements. If you have the following code:
    HTML Code:
    <p>Here's one para</p>
    <p style="display:inline;">Here's an inline para</p>
    <p>Here's a third para</p>
    the second paragraph looks like it's block, because it's sandwiched between two blocks, and it doesn't just run on from the previous one.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ShinVe View Post
    but I was hoping to figure out why the div set to display: inline didn't work.
    As Stevie said it will work if you have it laid out correctly.

    e.g.
    Code:
    p,div { display:inline }
    Code:
    <div> Some text </div>
    <p>more text</p>
    That will form one line of text.

    To make text run into two block elements then you need to make both the elements display:inline.

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2011
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Stevie, Paul. That does help, and I wasn't aware of that attribute of display: inline in conjunction with surrounding items.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •