Question

我无法将我的div设置为具有自动高度，具体取决于ul - li - a元素的高度。我想用背景颜色创建一个简单的水平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;}

Answer 1

这可以解决您的问题。

.ul_tools{
    display:inline-block;
}

Answer 2

您遇到嵌套浮动块元素的常见错误。当父母的子女浮动时，父母经常会崩溃，并且不会扩展到孩子的身高。

将此添加到父级。

.ul_tools {
    overflow: auto;
 }

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

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

Answer 3

指定float：left to .divmenuH

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

如何从ul / li元素变量高度设置自动div高度

4 个答案: