Css列表問題

Question

如何修復我的css列表問題表單文本在div標籤內顯示的問題。

# 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>