Solved: Bulleted list - need to indent second line of long sentence

Create Account

HTML

Questions

Followers

Top Experts

CSHTech🇬🇧

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.

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

Gurvinder Pal Singh🇮🇳

did you checked this?
http://stackoverflow.com/questions/4414973/css-negative-text-indent-in-lists-bullet-problems-with-opera
http://groups.google.com/group/macromedia.dreamweaver/browse_thread/thread/905e0f60c9893bb2

SOLUTION

h4hardy🇺🇸

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

Gurvinder Pal Singh🇮🇳

My second link above suggests two different ways of achieving this

-- use nested list, with second level list having no bullets
-- use negative indentation

CSHTech🇬🇧

ASKER

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?

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

Gurvinder Pal Singh🇮🇳

he has just given an example only.
you can put this in head section also

CSHTech🇬🇧

ASKER

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)....?

Gurvinder Pal Singh🇮🇳

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

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

CSHTech🇬🇧

ASKER

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

Kim Walker🇺🇸

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?

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh🇮🇳

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

CSHTech🇬🇧

ASKER

Quick resolution - many thanks.

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

HTML

Questions

Followers

Top Experts

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.