IE7에서 가변 폭 정렬되지 않은 목록에 부동 소수점 추가하기

<ul>을 각 <li> 안에 2 개의 링크로 구축하려고합니다. 각 <li> 안에있는 두 번째 링크는 수직으로 정렬되어야하며 Firefox 및 Internet Explorer 7에서 작동해야합니다. 문제는 플로트를 추가하면 IE7이 자동으로 너비를 허용하지 않고 페이지의 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>

아무런 도움이 필요 없으시다면 언제든지 부탁드립니다 !! 파이어 폭스에서 원하는 출력

이미지 예 : 파선 레이아웃 IE7에서 http://tinypic.com/view.php?pic=1564lte&s=7

이미지 예 : 감사 여기 시각적 예 여기 http://tinypic.com/view.php?pic=2h5oabk&s=7

출처

2011-08-18 DerfVader

원하는 결과의 다이어그램을 표시해야한다고 생각합니다. –

방금 stackypflow에 이미지를 게시하기에 충분한 "평판 포인트"가 없으므로 tinypic에 이미지를 게시했습니다. 위의 링크를 참조하십시오 ... 감사합니다! – DerfVader

은 대한 답을 찾을 수 미래에 이것을 필요로하는 nyone!

<!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에서 가변 폭 정렬되지 않은 목록에 부동 소수점 추가하기

답변

관련 문제