Я пытаюсь построить <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