3

I'm unable to set my div to have an auto height depending on the height of ul - li - a elements. I want to create a simple horizontal div with background color but I see how I have no height for my div. My li elements are links with icons and no text. This icons can-could have variable size.

Any help would be appreciated.Thanks

This is the html piece:

<div class="divmenu">
    <ul class="ul_tools">
        <li><a class="ico1" href="#" onclick="a_webgl_tools.zoom()" title="zoom"></a></li>
        <li><a class="ico2" href="#" onclick="a_webgl_tools.zoom()" title="zoom"></a></li>
    </ul>     
</div>

And its css :

.divmenuH {
    /* [disabled]margin: 25px  0 35px 15px; */
    background-color: #099;
    padding: 0 0 5px 0;
}


.ul_tools {     }
.ul_tools li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;

}
.ul_tools li a {
    margin: 0px 0px 0px 5px;
    display: block;
    width: 18px;height: 18px; 
    background-image: url(file:///D|/I_DESARROLLO/BIBLIO_ICONOS/Minimaloistas/mini.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 360px 360px /*20ICONS  18 x 18  */
}
.ul_tools li a.ico1 { background-position: 0px 0px;    }
.ul_tools li a.ico2 { background-position: -24px 0px;}
4

4 回答 4

13

这应该可以解决您的问题。

.ul_tools{
    display:inline-block;
}
于 2013-10-03T09:34:09.613 回答
2

您遇到嵌套浮动块元素的常见错误。当父级的子级浮动时，父级通常会崩溃并且不会扩展到子级的高度。

将此添加到父级。

.ul_tools {
    overflow: auto;
 }

您还需要明确设置li标签的大小，因为它们的大小不会适合背景图像：

.ul_tools li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    height: 30px;
    width: 30px;
}
于 2013-10-03T08:43:22.393 回答
0

指定 float:left 到 .divmenuH

于 2013-10-03T09:20:05.680 回答
0

使用这个 CSS

.divmenu{
    /* [disabled]margin: 25px  0 35px 15px; */
    background-color: #099;
    padding: 0 0 5px 0;display:block;


}


.ul_tools {     }
.ul_tools li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    display:inline-block

}
.ul_tools li a {
    margin: 0px 0px 0px 5px;
    display: block;
    height: 18px; 
    background-image: url(file:///D|/I_DESARROLLO/BIBLIO_ICONOS/Minimaloistas/mini.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 360px 360px /*20ICONS  18 x 18  */
}
.ul_tools li a.ico1 { background-position: 0px 0px;    }
.ul_tools li a.ico2 { background-position: -24px 0px;}
于 2013-10-03T09:31:25.267 回答