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; 
}