Latest Lists

how to remove CSS unordered list indent space?

How to remove the indent space, after applying list to the 3 lines of text button, when applies it pushes the object to some space forward, how it is possible through CSS HTML to remove the indent space of underorder list. but before answering this question, you must keep in mind that i want the underorder list, how to do it through css.

Public Comments

1. The short answer: ul.myClass li { margin-left: -25px; } <ul class="myClass"> <li>List item</li> </ul> The medium explanation: This works nicely, especially if you are nesting your lists to create a hierarchy. I.e.: <ul class="myClass"> <li>List item</li> <li>Parent list item <ul> <li>child</li> <li>child</li> </ul> </li> </ul> Each list item will be shifted 25 pixels to the left, getting rid of your indent, but sub-items will still be indented relative to their parent items. The long answer: By default, a <ul> has a left-margin of 40px (or 30pt in IE) and a padding of 0. And a <li> has a margin of 0 and a padding of 0. Setting the left-margin to 0 on a <ul> doesn't do anything. Setting the margin and padding to 0 on a <li> doesn't do anything either. Setting the padding to 0 on a <ul> will move the the list so far to the left, that the bullets are hidden. (This is because the padding applies to the text of the <li>, not the bullet. The text will appear at the left edge of the container, and the bullet will appear to the left of the text) And if you apply that globally, none of your sub-lists will be indented either. You won't be able to see that they are actually child list items, or that they have bullets. You might as will just use <div> tags if that's what you want. You can set the padding on the <ul> to 15px. And if you want this to be the default style for <ul>, that works great. However, if you only want this for certain lists, you need to add a second selector to apply the padding to any sub items: ul.myclass, ul.myclass ul { padding-left: 15px; } This is why I like the negative margin approach. You only need a single selector (ul.myclass li), and it works auto-magically for all sub-lists in your list. And a little extra: If you are concerned with the placement of the bullet, and especially if you want it to be consistent between browsers, you will be very frustrated. The bullet itself varies between browsers, as does its placement. The approach I take is to use a background image (not list-style-image): ul.myclass, ul.myclass ul { padding: 0; } ul.myclass li { padding-left: 15px; list-style-type: none; background: transparent url(mybullet.png) no-repeat 0px 5px; } Hope that helps!
2. Your unordered list should look like the following: <ul> <li> list item one </li> <li> list item two </li> <li> list item three </li> </ul> Either your CSS will be setting a margin or padding for your <ul> element or it will be for your <li> element. To get rid of this margin or padding for all unordered lists you can use the following CSS text: ul { margin: 0; padding: 0; } li { margin: 0; padding: 0; } Keep in mind that this will remove the margin for all unordered lists. You will need to specify the right class if you want to remove the margin from just one unordered list. You can set the individual margins by typing margin-top, margin-right, margin-left, margin-right. If you want the list to have 10 pixels distance from the left, you would write: margin-left: 10px; A note about 0 margins and padding: Without seeing what you have currently done, the 0 margin for your <ul> and <li> elements is suggested to reset any current configurations you might be using. It is then suggested to use classes for actual <ul> and <li> lists that you want to use on your pages. Changing the <ul> padding value to 0 will not hide the bullet. It will only do this if you are using a background image as your bullet. Using background images for lists is good, just remember that IE and Firefox are slightly different when they measure line heights so your background image could be at different heights if not created correctly.