如何获取列表项以填充父级无序列表

debugcn 发表于 Dev

安东尼·昆特罗

我试图使我的无序列表中的列表项填充整个列表。因为我有一个列表项是两个单词，所以这会使ul变大，但是其他列表项却没有填满，因此我只能翻过头来查看第二个ul，并且无法让我的鼠标访问这些按钮。

这是HTML

        <div id="body_left_nav"> 
            <nav>
                <ul>
                    <li><a href="#">Property Management</a>
                        <ul>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Multi-Family</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Brokerage</a>
                        <ul>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Multi-Family</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Leasing</a>
                        <ul>
                            <li><a href="#">Commercial</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Consulting</a> 
                        <ul>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Multi-Family</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

和CSS

#body_left_nav{
    width: 100%;
    margin-left: 10px;
    height: 100%;
}
#body_left_nav a { 
    font-weight: bold; 
    color: #000; 
    font-size: 14px;
}
#body_left_nav  ul {
    width: 100%;
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #004A65 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #004A65 100%); 
    background: -webkit-linear-gradient(top, #C4DAE8 0%,#004A65 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
#body_left_nav ul li {
    float: left;
    width: 25%;
}
#body_left_nav ul li:hover {
    background: #4b545f;    
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #C4DAE8 0%,#004A65 40%);
}
#body_left_nav ul li a {
    display: block;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
#body_left_nav ul li a:visited {
    color: #fff;
}
#body_left_nav ul li:hover a {
    color: #fff;
}
#body_left_nav ul li:hover > ul {
    display: block;
    top: 100%;
}
#body_left_nav ul:after {
    clear: both; 
    display: block;
}
#body_left_nav ul ul {
    width: 25%;
    background: #5f6975; 
    border-radius: 0px;
    position: absolute; 
    display: none;
}
#body_left_nav ul ul li {
    width: 100%;
    float: none; 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #004A65 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #004A65 100%); 
    background: -webkit-linear-gradient(top, #C4DAE8 0%,#004A65 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-top: 1px solid #D32026;
    border-bottom: 1px solid #D32026;
    position: relative;
}
#body_left_nav ul ul li a {
    text-align: center;
    color: #fff;
}

编辑：这是jsfiddle http://jsfiddle.net/bv9j8ra5/我不知道为什么整个导航和ul缩进。它在我的网站上没有执行此操作，但是我仍然遇到列表项未填充父ul的问题。

编辑：这也可能会有所帮助。这是正在发生的事情的图像。我在“物业管理”上没有差距，但在另一个3上有一个差距。[1]：http : //i.stack.imgur.com/NbDnW.png

永恒的时光

发生这种情况是因为您需要从嵌套ul中删除边距和填充。

#body_left_nav ul ul {
    width: 25%;
    background: #5f6975;
    border-radius: 0px;
    position: absolute;
    display: none;
    margin: 0;
    padding: 0;

编辑：

有几种解决方法，您可以使用padding静态地执行此操作。
这是适用的CSS：

#body_left_nav ul li {
    float: left;
    width: 25%;
    height: 50px;
}
#body_left_nav ul li a {
    display: block;
    padding: 1.2em 0;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

这是新的小提琴：http : //jsfiddle.net/bv9j8ra5/3/

编辑＃2：

或者，您可以通过相对定位来动态地执行此操作。

CSS：

#body_left_nav ul li {
        float: left;
        width: 25%;
        height: 50px;
}
#body_left_nav ul li a {
    display: block; 
    color: #fff;
    text-decoration: none;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这是小提琴：http : //jsfiddle.net/bv9j8ra5/5/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。