Css列表问题

Question

如何在div标签内修复我的css列表问题表格文本。

# ordered lists - the 
list items are marked with numbers or letters

在div标签内显示如下内容。

# ordered lists - the 
  list items are marked with numbers or letters.

这是html。

        <div>
            <h2>header</h2>
                <ul>
                    <li>ordered lists - the list items are marked with numbers or letters</li>
                    <li>ordered lists - the list items are marked with numbers or letters</li>
                </ul>
        </div>

CSS。

div {
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 5px 0px;
    background: #fff;
    float: right;
    width: 302px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 3px solid #fff;
}

div h2 {
    text-indent: 10px;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    font-size: 1.4em;
    width: 302px;
    color: #fFF;
    border-bottom: 1px dotted #fff;
}

div ul {
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    width: 308px;
}

div li {
    list-style-position: inside;
    border-bottom: 1px solid #fff;
    padding: 5px 10px;
    margin: 0px;
    width: 282px;
    color: #ffffff;
}

Answer 1

div > ul { 
  list-style-position: outside;
  margin-left: 20px;
}

Answer 2

第一个是list-style-position: inside，另一个是list-style-position: outisde和一些填充。

Answer 3

组合Unorder和订单列表，如下所示将完成您想要的事情

 <UL>
      <LH>Table Fruit</LH>
      <LI>apples
      <LI>oranges
      <LI>bananas
      <ol>
             <li>Coffee</li>
             <li>Milk</li>
         </ol>
</UL>