Question

我正在开发我的Wordpress主题（http://www.dev.visualvisual.com）。我有一个标题菜单，将 .menu-items 分散到顶部，第二个页脚菜单会将 .menu-items 分散到底部。

我已经对这些.menu-items元素中的每一个进行了不同的定位。

.header 的第一个.menu-item 位于左上角;当有 2nd .menu-item 时，它将与右上方对齐;如果有 3rd .menu-item ，那么第二个菜单项将位于中间;等等。我们拥有的菜单项越多，它们的压缩程度就越高。＆＃34;压缩＆＃34;沿着页面的整个宽度。这适用于.headermenu和.footermenu。我已经使用这些css规则来定位 .menu-items ：

.headermenu {
    position: fixed;
    top:0vh;
    left:0vw;
    width: 95vw;
    padding-right: 5vw; 
}

.headermenu ul {
    justify-content: space-between; 
    display: flex;
}

.footermenu {
    bottom:0vh;
    left:0vw;
    position: fixed;
    width: 95vw;
    padding-right: 5vw; 
}

.footermenu ul { 
    justify-content: space-between; 
    display: flex;
}

到目前为止一切顺利。我的问题是我想根据父母在页面上的位置来设置子元素的样式。由于我不知道将来的用户会添加多少菜单项（1,2,3,4甚至更多＆＃34;菜单项＆＃34;）我认为这对我来说是不可能的只用CSS做到这一点。

我写了这套粗略的规则来显示我的 .sub-menu 项目：

.menu-item > ul.sub-menu {  
    padding: 1vh;
    text-align: center;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease-out;
}

.menu-item:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
}

这组规则是将.sub菜单项与中心对齐，但如果文本比预期长，则其父级的宽度自然会增加，从而为其最大的孩子提供空间＆＃34;。所以现在我认为最好的选择是：

始终将儿童与第一个.menu项目对齐左上角;
将孩子们从最右边的最后一个.menu项目对齐到
如果有3个.menu项，请将孩子与最后一个对齐右边的.menu-item和第二个.menu-item的子节点中心。
如果有4个.menu项，请将孩子与最后一个对齐右边的菜单项和第二个和第三个的孩子 .menu-item到中心。
重复第3点和第4点的逻辑......

这是我的#header结构：

<div id="header">
    <h1>
        <div class="headermenu">
            <ul class="menu">
                <li class="menu-item"><a href="url_1">News</a></li>
                <li class="menu-item"><a href="url_2">Portfolio</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="url_2_a">Alternative Landscapes</a></li>
                        <li class="menu-item"><a href="url_2_b">Collection</a></li>
                        <li class="menu-item"><a href="url_2_c">Brave</a></li>
                        <li class="menu-item"><a href="url_2_d">Abstract Posters</a></li>
                        <li class="menu-item"><a href="url_2_e">Pedro, O Mau</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </h1>
</div> <!-- end of header -->

这是我的页脚结构：

<div id="footer">
    <h1>  
        <div class="footermenu"> 
            <ul id="menu-footer-menu" class="menu">
                <li class="menu-item"><a href="url_4">Contact</a></li>
                <li class="menu-item"><a href="url_5">Links</a></li>
                <li class="menu-item"><a href="url_6">About</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="url_6_a">More  Landscapes</a></li>
                        <li class="menu-item"><a href="url_6_b">Collection</a></li>
                        <li class="menu-item"><a href="url_6_c">Brave New</a></li>
                        <li class="menu-item"><a href="url_6_d">Line Three</a></li>
                        <li class="menu-item"><a href="url_6_e">Mary's World</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </h1>
 </div><!-- end of #footer -->

我认为解决方案必须与javascript循环有一定关系，该循环检查不同情况下菜单和属性特定ID中有多少项。我的javascript是基本的，但我感觉逻辑必须是这样的：

(this is not any type of code)
a) count menu-items
b) if 1 menu-item  > id#left 
c) if 2 menu-items > id#left to menu 1 > id#right to menu 2
d) if 3 menu-items > id#left to menu 1 > id#center to menu 2 > id#right to menu 3
e) if 4 menu-items > id#left to menu 1 > id#center to menu 2 and 3 > id#right to menu 4
f) if 5 menu-items > id#left to menu 1 > id#center to menu 2, 3 & 4 > id#right to menu 5...

你知道我至少可以在Javascript中开始说明这个吗？

非常感谢。

Answer 1

我认为您可以使用css伪元素:not() :first-child and :last-child来实现您想要做的事情。我已经使用您的代码创建了一个示例。这是你想要做的吗？

http://codepen.io/Nasir_T/pen/pEBpRw?editors=1100

Answer 2

来自.menu-items的所有儿童都与中心保持一致。但首先.menu-item子项与左侧对齐，最后一个.menu-item子项与右侧对齐。

编辑：

我认为现在情况好一些。在以前的代码中有一个小错误，我添加了几行。第一个.menu-item子（ul.sub-menu）的位置为左：0，最后一个子.menu-item子项为右：0。

＆＃13;

.headermenu {
    position: fixed;
    top:0vh;
    left:0vh;
    width: 95%;
    padding-right: 5vw; 
}

.headermenu ul {
    justify-content: space-between; 
    display: flex;
    list-style: none;
}

ul.menu > .menu-item {
    position: relative;
}

.headermenu ul.sub-menu {
    position: absolute;
    top: 70px;
}

.headermenu ul .menu-item:first-child ul.sub-menu {
    left: 0;
}

.headermenu ul .menu-item:last-child ul.sub-menu {
    right: 0;
}


.menu-item > ul.sub-menu {  
    padding: 1vh;
    text-align: center;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease-out;
}

.headermenu ul .menu-item:first-child .sub-menu li {
    text-align: left;
}

.headermenu ul .menu-item:last-child .sub-menu li {
    text-align: right;
}

.menu-item:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
}

＆＃13;

<body>
<div id="header">
    <h1>
        <div class="headermenu">
            <ul class="menu">
                <li class="menu-item"><a href="url_1">News</a>
					<ul class="sub-menu">
                        <li class="menu-item"><a href="url_2_a">Great News!</a></li>
                        <li class="menu-item"><a href="url_2_b">News2</a></li>
                        <li class="menu-item"><a href="url_2_c">News3</a></li>
                        <li class="menu-item"><a href="url_2_d">News4</a></li>
                        <li class="menu-item"><a href="url_2_e">Very Last News</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="url_1">Contact</a>
               		<ul class="sub-menu">
                        <li class="menu-item"><a href="url_2_a">AAAAA</a></li>
                        <li class="menu-item"><a href="url_2_b">BBB</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="url_2">Portfolio</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="url_2_a">Alternative Landscapes</a></li>
                        <li class="menu-item"><a href="url_2_b">Collection</a></li>
                        <li class="menu-item"><a href="url_2_c">Brave</a></li>
                        <li class="menu-item"><a href="url_2_d">Abstract Posters</a></li>
                        <li class="menu-item"><a href="url_2_e">Pedro, O Mau</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </h1>
</div>
</body>
</html>

＆＃13;

如何根据容器中父类元素的数量将不同的id归因于子元素

2 个答案: