我有一个(XHTML严格)页面,我将图像与常规段落的文本一起浮动.一切顺利,除非使用列表而不是段落.列表的项目符号与浮动图像重叠.
更改列表或列表项的边距没有帮助.边距是从页面左侧计算的,但浮动将列表项推送到自身内部的右侧li.因此,如果我将其宽于图像,则边距仅有帮助.
浮动图像旁边的列表也可以,但我不知道列表何时在浮点旁边.我不想在我的内容中浮动每个列表只是为了解决这个问题.此外,当图像浮动到列表的右侧而不是左侧时,浮动左侧会混淆布局.
设置li { list-style-position: inside }确实会将项目符号与内容一起移动,但它也会导致换行的行开始与项目符号对齐,而不是与上面的行对齐.
问题显然是由于子弹在盒子外面呈现,浮子将盒子的内容推到右边(而不是盒子本身).这就是IE和FF如何处理这种情况,据我所知,根据规范没有错.问题是,我该如何预防呢？
我找到了解决这个问题的方法.施加ul { overflow: hidden; }到ul该盒子本身是由浮子推开保证,而不是框的内容.
只有IE6需要ul { zoom: 1; }在我们的条件注释中确保ul有布局.
为Glen E. Ivey的解决方案添加改进:
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}?
http://jsfiddle.net/mblase75/TJELt/
我更喜欢这种技术,因为它在列表需要围绕浮动图像流动时起作用,而overflow: hidden技术则不然.但是,还需要添加padding-right: 1em它li以防止它们溢出容器.
这就是"显示"属性自成一体的地方.设置下面的CSS以使列表与浮动内容一起工作.
显示:表; 与浮动内容一起工作(填补空白)但不隐藏其背后的内容.就像桌子一样:-)
.img {
float: left;
}
.table {
display: table;
}
- Test content
- Test content
- Test content
- Test content
- Test content
- Test content
尝试list-style-position:inside来改变项目符号的布局.
在http://archivist.incutio.com/viewlist/css-discuss/106382,我找到了一个对我有用的建议:用'li'元素设置样式:
position: relative; left: 1em;
将"1em"替换为左侧填充/边距的宽度,如果浮动不存在,则列表项将具有该宽度.这在我的应用程序中非常有用,甚至可以处理浮动的底部出现在列表中间的情况 - 子弹向右移回到(本地)左边距.
通过至少为我overflow: auto;的ul作品添加.
更新
我已经更新了我的jsfiddle以可视化正在发生的事情.当ul浮动旁边时,浮动将推动img内容ul,而不是实际容器.通过添加overflow: auto整个ul-box将被浮动而不仅仅是内容推送.
ul {overflow: hidden;}
其中A块框overflow: hidden以外overflow: 建立一个新的块格式化上下文的内容.W3C建议:http://www.w3.org/TR/CSS2/visuren.html#block-formatting
例:
我的网站上的按钮是visible伪装的,就像这样.使浏览器的视口(窗口)变小,以查看缩进操作.
相关答案:
/sf/ask/17360801/
/sf/ask/17360801/
文章举例:
溢出 - 一个秘密的好处
你可以分配position: relative; left: 10px;给li.(你可能还想给它一个margin-right: 10px;,否则它可能在右侧变得太宽.)
或者,如果你想使用float的ul-其他人的建议-你也许可以从使用浮动UL权停止休息clear: left下面的UL的元素.
我用它来解决这个问题:
ul {
display: table;
}
浮动元素旁边的列表会导致问题.在我看来,防止这些浮动问题的最佳方法是避免浮动与内容相交的图像.当您必须支持响应式设计时,它也会有所帮助.
在段落之间设置居中图像的简单设计看起来非常有吸引力,并且比试图过于花哨更容易支持.它距离一个还有一步之遥
好的,所以如果你疯狂地坚持不懈地沿着这条路走下去,那么可以使用几种技术.
最简单的方法是使列表使用overflow: hidden或者overflow: scroll使列表基本上收缩包装,将填充拉回到有用的位置:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
- lorem
- ipsum
- dolor
- sit
- amet
京公网安备 11010802040832号 | 京ICP备19059560号-6 