Formatting HTML list to add variable size space

Question

Is there a way to put a "tab" symbol inside a list, so different length words will be formatted like a table:

For example

<li>Word1 <something> description111111111111</li>
<li>Word2222222 <something> description</li>

At the end it would look like this:

Word1            description11111111111
Word2222222      description

Is it possible?

Unless it is tabular data, don't use tables. Also, what are your browser support requirements? Also, looks like a definitions list (`
`) might work better for you — LoveAndCoding, Dec 01 '12 at 22:40
It is just an example. Actually I generate list with AJAX so it changes on time and values are also different :) — sauletasmiestas, Dec 01 '12 at 22:54

score 1 · Accepted Answer · answered Dec 01 '12 at 22:44

1

Use a SPAN tag, then position it absolute within the LI tag:

 <li>Column 1<span>Column 2</span></li>

CSS

li { position: relative } 
li span { position: absolute; left: 100px }

answered Dec 01 '12 at 22:44

jtheman

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.

edited May 23 '17 at 12:04

Community

answered Dec 01 '12 at 22:41

Simon Martin

2 Answers2