Question

I am trying to create ul and li element in my codes by using javascript. I have following:

var test=document.createElement('section');
test.setAttribute('id','test');

var ul=document.createElement('ul');


document.body.appendChild(test);
test.appendChild(ul);

for (var i=0; i<array.length; i++){

    var li=document.createElement('li');

    ul.appendChild(li);
    li.innerHTML=li.innerHTML + array[i];

}

My array is parsed using json_encode from php

array[0]='aaa';
array[1]='bbb';
array[2]='ccc';

CSS

section { 

    display: block;
    width: 200px;
    margin: 50px auto;
    border: 3px solid red;

}

Everything works fine except the list style dot is outside of my section tag.

It displays like this in Chrome and IE but firefox work fine.

 -------------
*| aaa       |
*| bbb       |
*| ccc       |
 -------------

I want my dot inside my section tag. Anyone idea? Thanks a lot.

Answer 1

Use the CSS property list-style-position to position the bullet:

list-style-position:inside /* or outside */;