Question

我正在使用一个似乎有点破碎的主题我试图列出具有潜艇的类别，其中包括潜艇。

即：马铃薯和芹菜是顶级的，有它们的潜艇和潜艇。

马铃薯


褐色


洗了


     芹菜


绿色


长

我遇到的问题是，顶级（马铃薯和芹菜）一个在另一个下面显示，而芹菜最后一个子/子子后显示芹菜，如上所示。这导致了每个重叠文本的所有子项。

即：

马铃薯
  celerybrown


greenwashed


长

CSS

#sidebar ul li {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #f0f0f0;
}
    ul.ecart_categories { /* category list container */ }
    ul.ecart_categories li { /* category listing containers */ }
    ul.ecart_categories li a { /* category link default styles */ }
    ul.ecart_categories li a:hover { /* category link hover styles */ }
    ul.ecart_categories li span { /* categpry product count styles */ }
    ul.ecart_categories li.current { /* currently viewed category container */ }
    ul.ecart_categories li.current a { /* currently viewed category link style */ }
    ul.ecart_categories li.current a:hover { /* currently viewed category link hover style */ }
    ul.ecart_categories li ul.children { padding-left: 10px;/* sub-category list container */ }
    ul.ecart_categories li ul.children li { padding-left: 10px;/* sub-category listing container */ }
    ul.ecart_categories li ul.active { /* active sub-category container */ }

输出

<div class="one_fourth" id="sidebar">
    <li id="ecartcategorieswidget-3" class="widget-1 widget-first widget sbg_widget Shop widget_ecartcategorieswidget">
    <h2 class="widgettitle sbg_title">Categories</h2>
    <ul class="ecart_categories">
        <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=30">Potato</a>
            <ul class="children">
                <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=36">Brown</a>
                    <ul class="children">
                        <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=40">Washed</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=1">Celery</a>
            <ul class="children">
                <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=2">Green</a>
                    <ul class="children">
                        <li><a href="http://www.myWPurl.com/page_id=25&amp;ecart_category=12">Long</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </li>
</div>

Answer 1

欢迎来到SO @ dazza49r。

必须有其他干扰，因为您提供的代码有效：

http://jsfiddle.net/jasongennaro/CzcrM/

你能提供更多你遗漏的CSS吗？

修改

根据新代码......问题出在height

#sidebar ul li { height: 35px; //REMOVE THIS line-height: 35px; border-bottom: 1px solid #f0f0f0; }

现在工作正常...... http://jsfiddle.net/jasongennaro/CzcrM/1/

HTML / CSS - li＆amp; ul重叠问题

1 个答案: