Text align of an unordered list item

Question

I'm wondering if there's any way to make the text of an unordered list item appear as a "column" by the side of the standard disc/dot list item icon? Made a pair of screenshots:

This is how it looks when using a standard unordered list with some text inside the list item (li):

And this is how I want it to look:

Is this possible without any image/div hacks? ;-) I've searched around to see if there's any standard CSS setting for it, but I couldn't seem to find any.

Thanks a lot in advance!

All the best,

Bo

Lamanna

hey now check to this i think you want this tinkerbin.com/8DhTi5M2 – Pronuba

d'ohh!! I had this setting on my ul: list-style-position:inside; Removing that made the difference ;-) – Lamanna

Answer 1

You can simply code it like this:

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
} 
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}

Pronuba

Thanks Rohit, I found the flaw in my css (sorry for not sharing it, first hand) - see my comment to my post ;-) Adding a width on the li is a great idea btw. Thanks again! :-) – Lamanna

Answer 2

list-style-position is the property you are looking for. It works in all browsers. (see MDN for more details)

ul {
   list-style-position: outside;
   /* You may want to add an additional padding-left: */
   padding-left: 1.5em;
}

But actually outside it is the default value. You probably overwrite it somewhere else.

Hookup

I think that's the best solution, that way there's no need to give a fixed width to the items, which most of the time is not possible anyway. – Mafaldamafeking

Answer 3

I think floating list items to the left is the best solution to make them appear as columns.

This CSS code may help you:

<style type="text/css">
    ul > li {
        margin: 0 10px;
        width: 150px;
        float: left;
    }
</style>

Hispanicism

Answer 4

It is just enough to use text surround with open(<li>) and closed(</li>) tags under <ul> tag.

For example,

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing 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. </li>
    <li>This is list item - 2</li>
    <li>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</li>
    <li>This is list item - 4</li>
</ul>

Output will be,

• Lorem ipsum dolor sit amet, consectetur adipiscing 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.
• This is list item - 2
• 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
• This is list item - 4

Nee

Answer 5

Add this

ul {
  display:inline-block;
}

to your css code.

Digamy