相关文章
更多最近更新
更多在列表li里两个浮动div兼容IE6问题
2019-03-25 13:42|来源: 网路
本来一个很简单功能,却难以兼容IE6,
<ul class="ulDiv" style="width: 302px; ">
<li onmousemove="this.style.backgroundColor='#6699FF'" onmouseout="this.style.backgroundColor='#ffffff'">
<div style="float: left"> name </div> <div style="float: right;"> times </div>
</li>
<li onmousemove="this.style.backgroundColor='#6699FF'" onmouseout="this.style.backgroundColor='#ffffff'">
<div style="float: left"> name </div> <div style="float: right;"> times </div>
</li>
</ul>
实现很简单,就在li里用2个div或者span,一个左浮动,一个右浮动,效果是实现了,但在IE6下,每个li的底部会有4像素的空白。但在firefox和chrome下却没问题,百思不得其解,后来把右边浮动的div改为 text-align: right;
下面是CSS代码:
<style>
.ulDiv {
padding: 0;
width: 302px;
border: 1px solid #111111;
background: #ffffff;
}
ul {
margin: 0;
padding: 0;
list-style: none;
background: #ffffff;
}
ul li {
line-height:1.5em;
margin: 0;
padding: 0;
width: 302px;
background: #ffffff;
cursor: default;
font-size: 12px;
height: 20px;
}
</style>
如果谁知道在li如果有两个div都是浮动,在IE6下,每个li的底部会有4像素的空白的原因,麻烦指教下小弟,谢谢。
问题补充
html[xmlns] li 这个属性用得妙啊``
相关问答
更多-
我想你想要这样的东西? 您可以使用left和right属性调整两个div的位置,这是可能的,因为它们的position: absolute 。 的jsfiddle .next { right: 6%; } .previous { left: 6%; } I think you want something like this? You can adjust the position of the two divs using the left and right property, this i ...
-
将vertical-align:top添加到img规则: img { max-width: 100%; height: auto; width: auto; vertical-align:top; } jsFiddle示例 Add vertical-align:top to your img rule: img { max-width: 100%; height: auto; width: auto; vertical-ali ...
-
尝试使用SuperPreview或整个软件包 (在Mix上宣布Expression Web),如果可以的话...... SuperPreview是Microsoft的一个新的免费独立应用程序(仍处于测试阶段),它使您能够看到您的网站在不同版本的Internet Explorer中的外观,使得从IE6迁移到7和8比以前更容易,而无需启动虚拟机器运行IE6,或者有一台专门用于运行IE6的计算机。 Try out SuperPreview or the whole package (Expression Web ...
-
将两个浮动
设置为相同的高度(Set two floating's to same height)[2022-02-20]添加此css: html, body { height: 100%; } .start-page-wrapper { height: 100%; } .first-section { height: 100%; } 更新了jsfiddle 编辑 或者,您可以将display: table用于父元素,并display: table-cell而不是float: left用于子元素。 它不适用于IE7。 的jsfiddle Add this css: html, body { h ...如果你使用了相同的代码,你还记得改变左边:'0'到右边? If you used the same code for the right, did you remember to change the left: '0' to right?在两个div中居中
- ?(Centering a
- within two divs?)
添加这个: #topNav { text-align:center } #topNav li { float:none; display:inline-block } Add this: #topNav { text-align:center } #topNav li { float:none; display:inline-block }看起来你只需要一个浮点数: div{border: 1px solid black} .left{ overflow: hidden; } .right{float: right} 示例http://jsfiddle.net/KmPjL/ Looks like you need only one float here: div{border: 1px solid black} .left{ overflow: hidden; } .right{float: right} Example http://j ...尝试添加style="display: inline"或display: inline-block; ,因为块在默认情况下内置了换行符,并且这会消除该中断。 Try adding style="display: inline" or display: inline-block;, as blocks have a linebreak built into them by default, and this removes that break.unders_side需要一个浮动和一个明确的:两个; 目前左右浮动 - 这将它们从文档流中取出。 这意味着下方在错误的位置结束。 如果你把浮动:左侧放在下方,它也将把它从文件流中取出并放在与左右相同的空间中(相对)然后你添加清除:两者都使它出现在左下方并且对 below_side needs a float and a clear:both; currently left and right are floated - which takes them out of the document flow. ...如何将div(包含两个居中文本)浮动到列表旁边?(How to float div (with both centered text inside) aside of list?)[2021-11-21]
看这里: http : //result.dabblet.com/gist/3360364/5e1586c78583dc31a495455e62327262c5ff2091 请注意,垂直对齐也是居中的。 Look here: http://result.dabblet.com/gist/3360364/5e1586c78583dc31a495455e62327262c5ff2091 Notice that the vertical alignment is centered, too.