将浮点数添加到IE7中的灵活宽度无序列表
[英]Adding float to flexible-width unordered list in IE7
问题描述
I'm trying to build a <ul> with two links inside each <li> . 
我正在尝试建立一个<ul> ，每个<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). 每个<li>内部的第二个链接应垂直对齐，并且应在Firefox和Internet Explorer 7中正常工作。问题是，当我添加一个浮动字体时，IE7会自动将<ul>扩展到页面的100％，而不是允许自动（或灵活）的宽度。 The code below works in FF, but not IE7. 下面的代码在FF中有效，但在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.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>
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 来自Firefox的示例图像，具有所需的输出： 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 来自IE7的示例图片，其布局已损坏： http : //tinypic.com/view.php?pic=2h5oabk&s=7
2 个解决方案
解决方案1
1 2011-08-18 20:28:52
Here, give this a try: 在这里，尝试一下：
解决方案2
0 已采纳 2011-08-19 19:58:57
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.