css - 如何使 ul 在其内容框中包含 li?

标签 css frontend

我怎样才能让下面的CSS变成一个更整洁合理的结构。如果您仔细检查以下代码。你会发现 ul 元素实际上占据了前面的一行,而不是包含 li 元素在一个盒子里。那么我可以做些什么改变来让 ul 封装所有四个 li 项呢?

演示:http://fiddle.jshell.net/Gghz8/

效果:http://fiddle.jshell.net/Gghz8/show/

最佳答案

在 li 上使用 float 时,它们会脱离文档流,这意味着 UL 不再知道其子项的大小,因此无法扩展其大小以适应其子项。

在 UL 上放一个 float 。 http://fiddle.jshell.net/Gghz8/2/

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

当我开发我的网站时,我几乎所有的东西都是 float 的。它只是有助于保持一致并避免像您现在遇到的问题。

关于css - 如何使 ul 在其内容框中包含 li?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18397576/

相关文章:

javascript - 如何删除div元素下方的空格

html - 如果输入是焦点,那么如何更改 Sass 中不同类的属性?

javascript - 在我开发时,chrome devtools 可以使用本地文件而不是网络文件吗?

javascript - 如何在 sass 文件中导入全局规则而不将其编译掉?

javascript - Angular 单元测试类型错误: Cannot read property 'subscribe' of undefined

javascript - 适用于 xcode 的 iphone 和 ipad epub 阅读器

html - 背景图像调整大小

jquery - 使固定 header 看起来持久

jquery - 如何在Jquery中找到多个类的输入元素

user-interface - 如何在 flutter 中获得相对于屏幕尺寸的小部件尺寸?