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

时间：2014-09-30 04:05:23

标签： html css html-lists

我正在尝试使我的无序列表中的列表项填满整个列表。因为我有一个列表项是两个单词，它使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都缩进了。它在我的网站上没有这样做，但我仍然遇到列表项没有填充父ul的问题。

编辑：这也可能有所帮助。这是一个发生什么的图像。我在物业管理＆＃34;上没有差距，但我有一个在另一个3. [1]：http://i.stack.imgur.com/NbDnW.png

2 个答案:

答案 0 :(得分：1)

live Demo或 full view Demo

你只需要重置

*{box-sizing:border-box;padding:0;margin:0;}

完整代码

*{box-sizing:border-box;padding:0;margin:0;}
#body_left_nav {
    width: 100%;
    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;
}
<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>

答案 1 :(得分：0)

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

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

修改

有几种方法，你可以用填充静态地做 这是适用的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/

相关问题
最新问题