dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Change <li> ?

  1. #1
    Join Date
    Jul 2006
    Location
    Sweden
    Posts
    190

    Change <li> ?

    Hi,

    I use a list with <ul> and <li>. I just wonder how to move the positions of the bullets to the left?

    Thanks!

  2. #2
    Join Date
    Mar 2010
    Posts
    8
    If you set a style on the li you can place the items of the list horizontally, however the only way i can think of keeping the bullet points with that is if you use an image.

    li
    {
    background-image:url(bullet.gif) no-repeat center left;
    padding-left:20px;
    display:inline;
    }

  3. #3
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    you can place the contents of each list item inside a <span> tag and give the span padding and an inline-block display. Like this:

    HTML Code:
    <ul>
      <li>
        <span>List Item 1</span>
      </li>
      <li>
        <span>List Item 2</span>
      </li>
      <li>
        <span>List Item 3</span>
      </li>
    </ul>
    and the CSS will look like this:
    HTML Code:
    li span
    {
      display: inline-block;
      padding-left: 50px; /*change this amount to whatever you want*/
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles