在IE7中將浮動寬度添加到靈活寬度的無序列表

我試圖在每個<li>內部建立一個帶有兩個鏈接的<ul>。每個<li>中的第二個鏈接應該垂直對齊，並且它應該在Firefox和Internet Explorer 7中工作。問題是，當我添加一個浮動時，IE7會自動將<ul>擴展爲頁面的100％，而不是允許寬度爲自動（或靈活）。下面的代碼適用於FF，但不適用於IE7。有任何想法嗎？在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與所需的輸出：從IE7 http://tinypic.com/view.php?pic=1564lte&s=7

實施例圖像用破碎布局：http://tinypic.com/view.php?pic=2h5oabk&s=7

來源

2011-08-18 DerfVader

我想你需要顯示所需結果的圖表。 –

我只是張貼圖像在tinypic（因爲我沒有足夠的「聲譽點」，以發佈圖像在stackoverflow）。看到上面的鏈接...謝謝！ – DerfVader

找到了答案未來誰需要這個！

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

來源

2011-08-19 19:58:57 DerfVader

在這裏，讓這個嘗試：

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

來源

2011-08-18 20:28:52

真棒回答Diodeus。不幸的是，我必須將所有的LI標籤保存在一起（對於輔助功能和語義代碼）......絕對是+1。這太創意了！ – DerfVader

在IE7中將浮動寬度添加到靈活寬度的無序列表

回答

相關問題