UL缘上方李
我正在下面的代码来:UL缘上方李
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
?
这是因为你是浮动的所有李时珍内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/
你真的把自己的边界放在那里:)。
#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>
,或者你只是删除该行...但我认为你的想法
而不是做float:left
的,使其display:inline
#Generate > li {
display:inline;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
恕我直言,浏览器缩小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;
}
谢谢。显示:内嵌块的作品。但是“ul”不覆盖整个页面的宽度。所以我给“li”显示了“display:inline-block”。并删除浮动。这是行得通的。 – Kowshik
感谢分享的链接。它帮助我理解了概念 – Kowshik