<li> not moving bullets with padding

Question

I'm trying to move the bullet points so they're inside my box wrap. They will not move. I'm also trying to have have an unordered list inside a ordered list as a sub-list.

HTML

<div class="box-wrap">
     <h2>Regler</h2>

    <p>
        <ul>
            <li>List Item
                <ol>
                    <li>Text Here</li>
                    <li>Text Here</li>
                    <li>Text Here</li>
                </ol>
            </li>
        </ul>
    </p>
</div>

CSS

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: left;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap li {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
    list-style-type: circle;
}

Thank you

Answer 1

Demo Fiddle

You need to close your ol and add a closing </li>, to move the bullet positions you can also use list-style-position:inside

Also, you currently have your ul and ol the wrong way around according to your requirements, and are overrideing the default li numbering by giving all your li list-style-type: circle;. Change your CSS per:

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
ul, ol {
    list-style-position:inside;
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: left;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap li {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap ul li {
    list-style-type: circle;
}

Answer 2

This is what you need? http://jqversion.com/#!/Xx29MFo

Pay attention to your HTML and CSS as there are some unneeded tags/properties.

Answer 3

If you want to get rid of the bullet points you need to add your css like:

ul {list-style:none;}

and if you want to have list inside another you can write like that For instance there is one list inside another

<ul class="parent">
  <li>Parent-1</li>
  <li>Parent-2</li>
  <li>Parent3
    <ul class="child">
     <li>Child3</li>
     <li>Child3</li>
     <li>Child3</li>
   </ul>
 </li>
</ul>

And then you can apply your css to your code like for instance I want to delete bullets of inside list.

enter code here

.parent .child li {list-style:none;}

I hope this will work for you.

Good Luck

Answer 4

http://jsfiddle.net/E5eW6/14/

1. Removed the width on the li and p, put it on the box-wrap container. Otherwise they are going out of the box. Width should be set on the container.
2. Removed the default margins on ul,...
3. Fixed the style wrongly applied to ol list-items.
4. height auto has no effect whatsoever thus removed it

5. Added padding on the main container

    /* apply a natural box layout model to all elements */
   *, *:before, *:after {
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
   .box-wrap {
       margin: 20px 0 0 0;
       padding: 20px;
       -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
       box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
       max-width: 640px;
       font-family:'Open Sans', Arial, Helvetica, sans-serif;
       color: #717171;
   }
   .box-wrap h2 {margin:0;padding:0;font-size: 18px;}
   .box-wrap ul,  .box-wrap ol {margin:0.8em 0 0 0;padding:0;}
   .box-wrap ul ol {margin-left:0.5em;}
   .box-wrap ul, .box-wrap ol {
       font-size: 14px;
   }
   
   .box-wrap ul > li {
       list-style-type: circle;
   }
   .box-wrap ol > li {
       list-style-type: decimal;
   }
   .box-wrap li {
       background: #ffffff;
       color: #717171;
       list-style-position: inside;
   }