Html 如何从 ul/li 元素可变高度设置自动 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19154585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set auto div height from ul/li elements variable height
提问by tperez
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.
我无法根据 ul - li - a 元素的高度将我的 div 设置为具有自动高度。我想用背景色创建一个简单的水平 div，但我看到我的 div 没有高度。我的 li 元素是带有图标的链接，没有文字。此图标可以具有可变大小。
Any help would be appreciated.Thanks
任何帮助将不胜感激。谢谢
This is the html piece:
这是 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>
And its css :
它的 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;}
回答by Mevin Babu
This should fix your problem .
这应该可以解决您的问题。
.ul_tools{
display:inline-block;
}
回答by Kevin Bowersox
Your experiencing a common error with nested floated block elements. When the children of a parent are floated the parent often collapses and does not expand to the height of the children.
您遇到嵌套浮动块元素的常见错误。当父级的子级浮动时，父级通常会折叠并且不会扩展到子级的高度。
Add this to the parent.
将此添加到父级。
.ul_tools {
overflow: auto;
}
You will also need to explicitly set the size of the litags, since they will not be sized to fit the background image:
您还需要明确设置li标签的大小，因为它们的大小不会适合背景图像：
.ul_tools li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
height: 30px;
width: 30px;
}
回答by Bala
specify float:left to .divmenuH
指定 float:left 到 .divmenuH
回答by Dinesh Kanivu
Use This CSS
使用这个 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;}
