HTML UL CSS邊框樣式

Question

我有一個關於html-lists和CSS的問題。我想有一個看起來像這樣的列表（白衣子表）（由應對代碼查看結果爲http://htmledit.squarefree.com/）：

<style type="text/css"> 
ul 
{ 
    border: 0px solid #90bade; 
} 
li 
{ 
    list-style-type:none; 
    border: 1px solid black; 
} 
.lv1 
{ 
    margin:0px 0px 0px 10px; 
} 

</style> 

<ul> 
    <li>One</li> 
    <li class ="lv1">Sub</li> 
    <li>One</li> 
</ul> 

但我更願意用HTML代碼這樣的名單：

<ul> 
    <li>One 
    <ul> 
     <li>Sub</li> 
    </ul> 
    </li> 
    <li>One</li> 
</ul> 

不幸的是，我不明白，如何風格的第二列表絲毫CSS，以使其看起來像第一個。有誰知道是否可以通過只使用CSS或者我必須製作一個大列表並使用類（如第一個列表中）來獲得所需的佈局？

在此先感謝

Answer 1

你可以用用div文本，並給予div所需的邊框。將div的樣式添加到您的CSS中，並從li中刪除邊框。這應該夠了吧。不過，我沒有看到沒有編輯HTML的可能的解決方案。

.border {  
    border: 1px solid black; 
} 

    <ul> 
     <li> 
     <div class="border">One</div> 
     <ul> 
      <li><div class="border">Sub</div></li> 
     </ul> 
     </li> 
     <li><div class="border">One</div></li> 
    </ul> 

Answer 2

正如Elwhis說，你可以做的就是添加< DIV>在< LI>，但你能避免「下課」是這樣的：

<style type="text/css"> 
ul 
{ 
    border: 0px solid #90bade; 
} 
li 
{ 
    list-style-type:none; 
    border: 0px solid black; 
} 

ul li div 
{ 
    border:1px solid black 
} 

</style> 

<ul> 
    <li><div>One</div> 
    <ul> 
     <li><div>Sub</div></li> 
    </ul> 
    </li> 
    <li><div>One</div></li> 
</ul> 

Answer 3

更換列表樣式類型：無;
with list-style-position：inside;

li 
{ 
    list-style-position:inside; 
    border: 1px solid black; 
}