Html 在IE7中将浮动添加到灵活宽度无序列表中
我正在尝试构建一个Html 在IE7中将浮动添加到灵活宽度无序列表中,html,css,internet-explorer-7,html-lists,css-float,Html,Css,Internet Explorer 7,Html Lists,Css Float,我正在尝试构建一个，每个内部有两个链接。每个中的第二个链接应该垂直对齐，并且应该可以在Firefox和InternetExplorer7中使用。问题是，当我添加一个浮动时，IE7会自动将扩展到页面的100%，而不是允许宽度自动（或灵活）。下面的代码适用于FF，但不适用于IE7。有什么想法吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.menu-block {
position:absolute; /*this gives the menu a flexible width in FF,
preventing the <ul> from expanding to 100%*/
}
ul {
list-style:none;
width:auto; /* allows for flexible lengths on the first link in the li*/
}
a.leftlink {
background:#CC9900;
float:left;
}
a.rightlink {
background:#006699;
float:right;
width:50px; /*fixed width for the "more" link*/
}
</style>
</head>
<body>
<div class="menu-block">
<ul>
<li> <a href="#" class="leftlink">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</a> <a href="#" class="rightlink">More</a></li>
<li> <a href="#" class="leftlink">bbbbbbbbbb.</a> <a href="#" class="rightlink">More</a></li>
</ul>
</div>
</body>
</html>
无标题文件
分区菜单块{
位置：绝对；/*这使菜单具有灵活的宽度，单位为FF，
防止扩展到100%*/
}
保险商实验室{
列表样式：无；
宽度：自动；/*允许在li中的第一个链接上使用灵活的长度*/
}
a、 左链接{
背景：#CC9900；
浮动：左；
}
a、 右链接{
背景#006699；
浮动：对；
宽度：50px；/*用于“更多”链接的固定宽度*/
}
为将来需要的人找到了答案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.menu-block {
position:absolute; /*this gives the menu a flexible width in FF, preventing the <ul> from expanding to 100%*/
}
ul {
list-style:none;
width:auto; /* allows for flexible lengths*/
}
li{ position:relative; width:auto;}
a.leftlink {
background:#CC9900;
margin-right: 50px;
}
a.rightlink {
background:#006699;
position:absolute;
top: 0;
right:0; /*key piece I was missing before*/
width:50px; /*fixed width for the "more" link*/
text-align:right;
}
</style>
</head>
<body>
<div class="menu-block">
<ul>
<li> <a href="#" class="leftlink">aaaaaaaaa.</a> <a href="#" class="rightlink">More</a></li>
<li> <a href="#" class="leftlink">bbbbbbbbbbbbbbbbbbbbbbb.</a> <a href="#" class="rightlink">More</a></li>
</ul>
</div>
</body>
</html>
无标题文件
分区菜单块{
位置：绝对；/*这使菜单具有灵活的FF宽度，防止扩展到100%*/
}
保险商实验室{
列表样式：无；
宽度：自动；/*允许灵活的长度*/
}
li{位置：相对；宽度：自动；}
a、 左链接{
背景：#CC9900；
右边距：50px；
}
a、 右链接{
背景#006699；
位置：绝对位置；
排名：0；
右：0；/*我以前缺少的关键部件*/
宽度：50px；/*用于“更多”链接的固定宽度*/
文本对齐：右对齐；
}