sub-section with
in its
's

Question

Following this question , and according this answer .

I try to make same list but with ... wraped in each <li> , seems it works but my problem is that it break a line for each <li> .

Here it with NO  - http://jsfiddle.net/urielz/tv5fV/ ,

and here it with the  - http://jsfiddle.net/urielz/2ANwJ/1/

How to make the 2nd (with ) to be looks like the 1st (no ) ?

Preferably answers with just css edit , but jQuery also would be acceptable .

Why do you want a paragraph in your list item? – user247702 May 28 '14 at 14:19 — user247702, May 28 '14 at 14:19

Reinder Wit · Accepted Answer · 2014-05-28T14:23:22.087

1

use display:inline for your  tags:

li p {display:inline}

Making it 'inline' will remove the line break since it will no longer be a block-level element and also it will get rid of the margins that browsers use by default for  tags.

See this Updated and working fiddle

edited May 28 '14 at 14:23

answered May 28 '14 at 14:17

Reinder Wit

6,490
1
25
36

Luke · Answer 2 · 2014-05-28T14:24:13.793

1

use display:inline or display:inline-block; for the  tag.

By default,  tags are set as display:block;, which will break your content to a new line. espacially when you use content using :before

http://jsfiddle.net/2ANwJ/7/

li > p { 
    display: inline; 
}

edited May 28 '14 at 14:24

answered May 28 '14 at 14:18

Luke

8,235
3
22
36

1

you need to reset the padding and margin to 0 as well if ur using inline-block – user1534664 May 28 '14 at 14:18
no, that is not what was asked. so this is additional styling – Luke May 28 '14 at 14:20
or, well, you are right. he says like 1st... i´ll update – Luke May 28 '14 at 14:21

sub-section with in its

2 Answers2

sub-section with
in its
's