Question

我正在创建MegaMenu的项目，我从JSON文件中获取它。书面简单的HTML结构逻辑。

#menu { border:solid 2px green; float:left;}
#menu ul { padding:0; margin:0; clear:both; float:none;}
#menu ul li {padding-bottom:5px; color:green; float:left; list-style:none; width: 20%;}
li a { color:green;}
#menu ul li li {float:none;}
li li a { color:blue;}

<div id="menu">
    <ul>
        <li><a href="#">Nav Item 1</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
        <li><a href="#">Nav Item 2</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
        <li><a href="#">Nav Item 3</a>
            <ul>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
        <li><a href="#">Nav Item 4</a>
        </li>
        <li><a href="#">Nav Item 5</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 6</a>
        </li>
         <li><a href="#">Nav Item 7</a>
            <ul>
               <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 8</a>
            <ul>
               <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 9</a>
            <ul>
               <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
         <li><a href="#">Nav Item 10</a>
            <ul>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
                <li><a href="#">SubItem</a></li>
            </ul>
        </li>
    </ul>
</div>

问题：我的疲惫输出。单击“运行代码段”按钮。我发现，List项目没有正确对齐。

所需的输出：我想将列表项正确对齐。我希望第6项出现在第1项之后，并且没有空格。

是否可以在不使用jQuery JavaScript的情况下实现这一目标？

Answer 1

您还需要添加此内容

import collections
from os.path import basename, splitext

x = collections.OrderedDict((e, i) for i, e in enumerate(x))

id_list = [j[0] for j in sorted(y, key=lambda e: x[splitext(basename(e[1]))[0]])]

Demo

Answer 2

您可以使用以下CSS：

#menu {
    border: solid 2px green;
    float: left;
}
#menu ul {
    padding: 0;
    margin: 0;
    clear: both;
    float: none;
}
#menu ul li {
    padding-bottom: 5px;
    color: green;
    float: none;
    display: inline-block;
    list-style: none;
    width: 20%;
}
li a {
    color: green;
}
#menu ul li li {
    float: none;
    display: block;
}
li li a {
    color: blue;
}

简单<ul> <li> HTML结构：MegaMenu

2 个答案: