如何設置自動div高度從ul/li元素可變高度

我無法設置我的div有一個自動高度取決於ul - li - 一個元素的高度。我想創建一個帶有背景顏色的簡單水平div，但是我看到了我的div沒有高度。我的li元素是鏈接圖標，沒有文字。這個圖標可以 - 可以具有可變的大小。如何設置自動div高度從ul/li元素可變高度

任何幫助將是appreciated.Thanks

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

來源

2013-10-03 tperez

[這會對你有用]（http://www.quirksmode.org/css/clearing.html） – Pete

謝謝皮特！我要回顧一下 – tperez

這應該解決您的問題。

.ul_tools{ 
    display:inline-block; 
}

來源

2013-10-03 09:34:09

太棒了，謝謝。 – tperez

你遇到了嵌套浮動塊級元素一個常見的錯誤。當父母的子女漂浮時，父母往往會崩潰，而不會擴大到孩子的身高。

將此添加到父項。

.ul_tools { 
    overflow: auto; 
}

你還需要明確設置li標籤的大小，因爲它們不會被調整大小以適應背景圖片：

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

來源

2013-10-03 08:43:22

指定浮動：左.divmenuH

來源

2013-10-03 09:20:05 Bala

使用此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-03 09:31:25

如何設置自動div高度從ul/li元素可變高度

回答

相關問題