Bulleted list - need to indent second line of long sentence

Hi

I've got a Wordpress site which has bulleted lists, but where the sentence is long, the text wraps to the second line directly under the bullet instead of where the text is indented....such as : -

*  This is where the text starts
and continues

Is there a way of moving the second line of text to the right, in CSS or HTML? I've tried various ways but they all seem to create a paragraph space, which I don't want.

Any help appreciated as I need to finish this site. Thanks.
CSHTechAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
line 1-3 and 9 are not required. Since the selectors and styles are already defined in 5-7 lines.

line 5-7 can also be written this way

ul.mylist
{
   list-style-position: inside;
}
ul.mylist li
{
  text-indent: -1em; position: relative; left: 2em; margin-right: 2em;
}
ul.mylist li p
{
   display: inline;
}
0
 
h4hardyConnect With a Mentor Sr. Software EnginnerCommented:
<style type="text/css">
       ul.mylist {list-style-position: inside;}
  ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;}
  ul.mylist li p {display: inline;}

   </style>
    <ul class="mylist">
      <li>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
      </li>
      <li>Second list item long item long item Second list item long item long item Second list item long item long item Second list item long item long itemSecond list item long item long itemSecond list item long item long item

      </li>
    </ul>

    <ul class="mylist">
      <li>
        <p>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
        </p>
      </li>
      <li>Second list item
      </li>
    </ul>

Open in new window

0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
Gurvinder Pal SinghCommented:
My second link above suggests two different ways of achieving this

-- use nested list, with second level list having no bullets
-- use negative indentation
0
 
CSHTechAuthor Commented:
Thank you for the quick replies.

I just need to clarify something - I can create the "mylist" on the page but what is the best way to implement this in Wordpress? For example couldn't this be placed into style.css (if so I'd appreciate a steer as to how it is presented)?

I'm a little confused as I thought that the <style type+"text/css"> section is meant to be in the head section of page html?
0
 
Gurvinder Pal SinghCommented:
he has just given an example only.
you can put this in head section also
0
 
CSHTechAuthor Commented:
Sorry, I think I may not have explained.

As far as I know, the easiest way of implementing this in Wordpress would be by using style.css with a "mylist" class - is this correct? (Particularly as there are a number of lists in the site).

If so, what would need to be placed in style.css to implement this (as there is no html 'head' section for individual pages as such)....?

0
 
Gurvinder Pal SinghCommented:
check this code (modified his code a little bit).
You just need to put this css in the style section
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		ul.mylist {list-style-position: inside;}
		ul.mylist li {text-indent: -1em; position: relative; left: 2em; margin-right: 2em;}
		ul.mylist li p {display: inline;}
	</style>
</HEAD>

<BODY>
<ul class="mylist">
      <li>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
      </li>
      <li>Second list item long item long item Second list item long item long item Second list item long item long item Second list item long item long itemSecond list item long item long itemSecond list item long item long item

      </li>
    </ul>

    <ul class="mylist">
      <li>
        <p>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
        </p>
      </li>
      <li>Second list item
      </li>
    </ul>
</BODY>
</HTML>

Open in new window

0
 
CSHTechAuthor Commented:
Thank you - is this how it should be entered onto style.css?

 
ul.mylist

{

ul.mylist {list-style-position: inside;}
ul.mylist li {text-indent: -1em; position: relative; left: 2em; margin-right: 2em;}
ul.mylist li p {display: inline;}

}

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You only need lines 5-7 in style.css.

ul.mylist {list-style-position: inside;}
ul.mylist li {text-indent: -1em; position: relative; left: 2em; margin-right: 2em;}
ul.mylist li p {display: inline;}

Open in new window


Of course, this assumes your unordered list has a class of "mylist" and your html structure matches gurvinder372's example above.

Can you provide a link to the page you're referring to?
0
 
CSHTechAuthor Commented:
Quick resolution - many thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.