HTML UL CSS 边框样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5127583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML UL CSS Border style
提问by Naugrim
I have a little question concerning html-lists and CSS. I want to have a list (whit sublist) that looks like this (view the result by coping the code into http://htmledit.squarefree.com/):
我有一个关于 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>
But I would prefer to use html-code like this for the list:
但我更愿意在列表中使用这样的 html 代码：
<ul>
<li>One
<ul>
<li>Sub</li>
</ul>
</li>
<li>One</li>
</ul>
Unfortunately I cannot figure out, how to style the second list whit CSS in order to make it look like the first one. Does anyone know if it's possible by only using CSS or do I have to make one big list and use classes (like in the first list) to get the desired layout?
不幸的是，我无法弄清楚如何使用 CSS 为第二个列表设置样式以使其看起来像第一个列表。有谁知道是否可以仅使用 CSS 或者我是否必须制作一个大列表并使用类（如第一个列表中）来获得所需的布局？
Thanks in advance
提前致谢
回答by Elwhis
You can wrap the text with a divand give the divthe desired border. Add the style for the divto your CSS and remove the border from your li. That should do the trick. I don't see a possible sollution without editing the HTML, though.
您可以用 a 包裹文本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>
回答by Fabiano Shark
As Elwhis said, what you can do is add the <div> in <li> but you can avoid "class" like this:
正如 Elwhis 所说，你可以做的是在 <li> 中添加 <div> 但你可以避免这样的“类”：
<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>
回答by Vladimir Chizhov
Replace list-style-type:none;
with list-style-position:inside;
替换列表样式类型：无；
带有列表样式位置：内部；
li
{
list-style-position:inside;
border: 1px solid black;
}
