Adding float to flexible-width unordered list in IE7_问答_开发者

Adding float to flexible-width unordered list in IE7

开发者 https://www.devze.com 2023-03-28 21:44 出处：网络

I\'m trying to build a <ul> with two links inside each <li>. The second link inside each <li> should be vertically aligned, and it should work in Firefox and Internet Explorer 7. The

I'm trying to build a <ul> with two links inside each <li>. The second link inside each <li> should be vertically aligned, and it should work in Firefox and Internet Explorer 7. The problem is, when I add a float, IE7 automatically expands the <ul> to 100% of the page rather than allowing the width to be automatic (or flexible). The code below works in FF, but not IE7. Any ideas?

<!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.or开发者_StackOverflow社区g/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>

Any help at all would be greatly appreciated!! Thanks, here are some visual examples:

Example image from Firefox with the desired output: http://tinypic.com/view.php?pic=1564lte&s=7

Example image from IE7 with the broken layout: http://tinypic.com/view.php?pic=2h5oabk&s=7

Here, give this a try:

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

Found the answer for anyone who needs this in the future!

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