Question

我正在尝试在每个<ul>内构建一个包含两个链接的<li>。每个<li>内的第二个链接应该是垂直对齐的，它应该在Firefox和Internet Explorer 7中工作。问题是，当我添加一个浮点数时，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

Answer 1

在这里，尝试一下：

http://jsfiddle.net/p5a76/4/

Answer 2

为将来需要此功能的人找到答案！

<!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>

在IE7中将浮点数添加到灵活宽度无序列表中

2 个答案: