11

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):

enter image description here

And this is how I want it to look:

enter image description here

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

bomortensen
  • 3,346
  • 10
  • 53
  • 74

5 Answers5

9

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.

KevinH
  • 1,066
  • 1
  • 14
  • 17
  • 1
    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. – laurent Nov 12 '17 at 23:16
4

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;
}
Kel
  • 13
  • 4
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • 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! :-) – bomortensen Jul 04 '12 at 12:55
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>
Kel
  • 13
  • 4
0

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
Sakthivel
  • 576
  • 8
  • 15
-2

Add this

ul {
  display:inline-block;
}

to your css code.

Richard
  • 748
  • 3
  • 8
  • 23
paddotk
  • 1,359
  • 17
  • 31