如何根据 ul/li 元素的可变高度设置自动 div 高度

Question

我无法根据ul-li-a元素的高度自动设置div的高度。我想创建一个简单的水平div并设置背景颜色，但是我发现我的div没有高度。我的li元素是带有图标而没有文本的链接。这些图标可能具有可变大小。

任何帮助都将不胜感激。谢谢。

以下是HTML代码片段：

<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>

它的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;}

- user2604757

---

这篇文章对你来说很有用：http://www.quirksmode.org/css/clearing.html - Pete

谢谢Pete！我会去审查它。 - user2604757

Answer 1

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

.ul_tools{
    display:inline-block;
}

- Mevin Babu

Answer 2

你遇到了关于嵌套浮动块元素的常见错误。当父元素的子元素被浮动时，父元素通常会折叠并且不会扩展到子元素的高度。

将以下内容添加到父元素中：

.ul_tools {
    overflow: auto;
 }

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

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

- Kevin Bowersox

Answer 3

将 float:left 指定给 .divmenuH

- Bala

Answer 4

使用此 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;}

- Dinesh Kanivu