Question

有一个带有li和ul标签的菜单

<div class="menu">
    <ul class="hide-for-small">
        <li><a href="index.php">one</a> 
        </li>
        <li><a href="ac2.php">two</a>

            <ul>
                <li><a href="acc.php">1</a>
                </li>
                <li><a href="sal.php">2</a>
                </li>
                <li><a href="rec.php">3</a>
                </li>
                <li><a href="coss.php">4</a>
                </li>
            </ul>
        </li>
        <li><a href="ac3.php">three</a> 
        </li>
        <li><a href="ac4.php">four</a>

        </li>
    </ul>
</div>

我想将此菜单分为四个相等的部分，为此我添加了

.menu {
     height:555px;
    margin-top:40px;

    width:980px;
    position:absolute;
    z-index:9999;
    top:0
}
.menu ul {
    display:inline;
    list-style:none;
    width:100%;
    position:relative;
    margin-top:40px
}
.menu li {
    float:left
}
.menu li a {
    font-family:Bariol, Arial;
    font-size:20px;
    text-transform:uppercase;
    color:#000
}
.menu li a:hover {
    opacity:.8
}
.menu li:nth-last-of-type(-n+3) {
    float:right;
    margin-left:38px
}
.menu li:nth-child(-n+3) {
    margin-right:38px
}
.menu ul li:hover ul {
    visibility:visible;
    opacity:1;
    transition-delay:0
}
.menu ul li ul {
    visibility:hidden;
    opacity:0;
    transition:visibility 0 linear .5s, opacity .5s linear;
    list-style:none;
    float:left;
    clear:both;
    position:absolute;
    margin:0;
    width:auto;
    z-index:999999
}
.menu ul li:hover ul {
    visibility:visible;
    opacity:1;
    transition-delay:0
}
.menu ul li ul li {
    float:left;
    float:none !important;
    position:relative;
    display:block;
    height:25px;
    margin:0 !important
}
.menu ul li ul li a {
    font-size:15px;
    display:block;
    margin:10px 0;
    background-color: #fff
}

并且从100%到25%

的宽度变宽

.menu ul {
        display:inline;
        list-style:none;
        width:100%;
        position:relative;
        margin-top:40px
    }

但是我得到了不受欢迎的结果。

如何在菜单中更改css以拆分？请查看jsfiddle

Answer 1

使用table-layout: fixed;的表格布局可以平均分割4 li。

display:table; table-layout: fixed; - 适用于ul

对于li，

display:table-cell;，并移除float的{{1}}。

JsFiddle

Answer 2

从下一课中删除float:right;。

.menu li:nth-last-of-type(-n+3) {
    margin-left:38px
}

jsFiddle

如何分成4个相等的部分菜单

2 个答案: