UL缘上方李

Question

我正在下面的代码来：

HTML：

<ul id="Generate"> 
    <li>Home1</li> 
    <li>Home2</li> 
    <li>Home3</li> 
    <li>Home4</li> 
</ul> 

CSS：

#Generate { 
    list-style-type:none; 

    padding:0px; 
    border:1px solid red; 
} 

#Generate > li { 
    float:left; 
    width:100px; 
    text-align:center; 
    background-color:red; 
    color:white; 
    border:1px solid blue; 
    height:20px; 
} 

的UL边框顶部到来为一条实线。在下面我看到有一排有LI元素。我期待UL边框包含所有li元素。因为它是父母。为什么浏览器缩小了ul？

Answer 1

这是因为你是浮动的所有李时珍内UL。如果一个容器仅包含浮动元素而没有明确设置容器高度，则容器的最终高度将为零。

尝试增加overflow：auto更改您的UL：

#Generate { 
    list-style-type:none; 
    overflow: auto; 
    padding:0px; 
    border:1px solid red; 
} 

此URL是所有的东西 “浮动” 一个很好的资源。 查看标题为“大崩溃”的部分。 https://css-tricks.com/all-about-floats/

Answer 2

你真的把自己的边界放在那里:)。

#Generate { 
list-style-type:none; 

padding:0px; 
border:1px solid red; <---------border 
} 

所以这将做到：

<style> 
#Generate { 
list-style-type:none; 

padding:0px; 
border:0px solid red; 
} 

#Generate > li { 
align:left; 
width:9%; 
text-align:center; 
background-color:red; 
color:white; 
border:1px solid blue; 
height:20px; 
} 


</style> 

<ul id="Generate"> 
    <li>Home1</li> 
    <li>Home2</li> 
    <li>Home3</li> 
    <li>Home4</li> 
</ul> 

，或者你只是删除该行...但我认为你的想法

Answer 3

而不是做float:left的，使其display:inline

#Generate > li { 
    display:inline; 
    width:100px; 
    text-align:center; 
    background-color:red; 
    color:white; 
    border:1px solid blue; 
    height:20px; 
} 

Answer 4

恕我直言，浏览器缩小UL因为UL是流内容类别对象，我们从W3C规范们知道这种正常对象的宽度流程计算为'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'= width of含有块'（W3C site）。所以，如果你想ul的边框只包含“li”元素，你可以添加'display：inline-block;'在＃通用的CSS规则如下所述：

#Generate { 
    list-style-type:none; 

    padding:0px; 
    border:1px solid red; 
    display:inline-block; 
} 

https://jsfiddle.net/uw4krhL1/