问题描述
我有
< 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指定最顶层的元素:
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;
}
和。
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的填充样式的好方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!