设计应该出现在同一级别的嵌套uls的填充样式的好方法 [英] Good way to style padding of nested uls that should appear at the same level

问题描述

我有这种类型的结构

 < UL> 
< li> one< / li> 
< li> 
两个孩子
< ul> 
< li> a< / li> 
< li> b< / li> 
< / ul> 
< / li> 
< li> 
三个孩子
< ul> 
< li> x< / li> 
< / ul> 
< / li> 
< / ul> 
  

尽管逻辑上所有东西都是这样组织的，但我需要将所有内容都显示在一个简单的列表中。 / p>

我可以通过从ul，li中删除边距和填充来实现这一点，但是这样可以避免li可以填充。

我想将所有列表项目放在5px的范围内，但只是简单地这样做会实际上在左侧和顶部缩进10px的嵌套li。 基本上我需要它看起来像这样。什么是设置填充的好方法，不会推送嵌套列表。

我可以自由修改基本html结构，但我想继续嵌套，因为它使很多其他的东西，我更容易（如可展开/可隐藏的孩子）

解决方案

你可以做的只是选择最上面的< ul> ，然后只给它的子（但不是孙）<例如，用ID指定最顶层的元素：

$ b $

使用CSS> b

HTML：

 < ul id =Head> 
< li> one< / li> 
< li> 
两个孩子
< ul> 
< li> a< / li> 
< li> b< / li> 
< / ul> 
< / li> 
< li> 
三个孩子
< ul> 
< li> x< / li> 
< / ul> 
< / li> 
< / ul> 
  

CSS：

 ＃头部> li 
 {
 padding-left：5px; 
} 
  

和这里是关于jsFiddle的示例。

I have this type of structure

<ul>
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

Although logically everything is organized like this I need to display everything in a single flat-looking list.

I can do that by removing margins and padding from ul,li but that litterally makes it so that no li can have padding.

I would like to pad all list items by 5px but simply doing that will actually indent the nested li's by 10px on the left and on top. Basically I need it to look like this. What's a good way of setting up padding that won't push over the nested lists.

I am free to modify the basic html structure but I would like to keep the nesting as it makes a lot of other stuff that I'm doing easier (such as expandable/hideable children)

解决方案

What you can do is select only the topmost <ul>, and then give only its child (but not grandchild) <li> elements spacing using the CSS > selector.

For example, specifying the topmost element with an id:

HTML:

<ul id="Head">
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

CSS:

#Head > li
{
    padding-left: 5px;
}

And here's the example on jsFiddle.

这篇关于设计应该出现在同一级别的嵌套uls的填充样式的好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！