我正在尝试构建一个 <ul>每个内部有两个链接 <li> .每个<li>里面的第二个链接应该垂直对齐，它应该在 Firefox 和 Internet Explorer 7 中工作。问题是，当我添加一个 float 时，IE7 会自动扩展 <ul>到页面的 100%，而不是让宽度自动(或灵活)。下面的代码适用于 FF，但不适用于 IE7。有什么想法吗？
<!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>
任何帮助都将不胜感激!!谢谢，这里有一些视觉示例:
来自 Firefox 的具有所需输出的示例图像:http://tinypic.com/view.php?pic=1564lte&s=7
来自 IE7 且布局损坏的示例图像:http://tinypic.com/view.php?pic=2h5oabk&s=7
最佳答案
在这里，试一试:
关于html - 在 IE7 中将 float 添加到灵活宽度的无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7112782/