CODEWITHSUNDEEP
htmlcsshtml-liststext-alignment
bomortensen
bomortensen

Reputation: 3396

Text align of an unordered list item

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

Upvotes: 11

Views: 40920

Answers (5)

Sakthivel
Sakthivel

Reputation: 626

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

Upvotes: 1

KevinH
KevinH

Reputation: 1144

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.

Upvotes: 9

user1501231
user1501231

Reputation:

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>

Upvotes: 3

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

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;
}

Upvotes: 5

paddotk
paddotk

Reputation: 1440

Add this

ul {
  display:inline-block;
}

to your css code.

Upvotes: -2

Related Questions