Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I reduce the spacing between li numbers & content?

Tags:

css

I want to lessen the spacing between the ordinals and the content, i.e I want to change from:

1.  foo

to:

1. foo

Possible? Normal <ol><li>...content</li></ol>

like image 208
Nobody Avatar asked Nov 11 '11 20:11

Nobody


People also ask

How do I reduce space between lists?

The spacing between list items in an orderedlist or itemizedlist element can be minimized by the document author by adding a spacing="compact" attribute to the list element. In HTML output, the list will get a compact="compact" attribute on the list start tag to reduce spacing in the browser.

How do I reduce horizontal space between Li in HTML?

You need to use display:block and float:left on the li s to remove the space. When they're inline the browser treats them as words, and so leaves space in between.


2 Answers

try list-style-position:inside;

like image 189
bravedick Avatar answered Nov 22 '22 21:11

bravedick


You can do it with a span

<ol>
  <li><span style="margin-left: -10px">near</span></li>
  <li>normal</li>
</ol>

You can also do something like this:

<ol>
  <li style="text-indent: -5px">near</li>
  <li>normal</li>
</ol>
like image 37
uadrive Avatar answered Nov 22 '22 19:11

uadrive