gpt4 book ai didi

html - 在 IE7 中将 float 添加到灵活宽度的无序列表

转载 作者:太空宇宙 更新时间:2023-11-04 16:18:11 25 4
gpt4 key购买 nike

我正在尝试构建一个 <ul>每个内部有两个链接 <li> .每个<li>里面的第二个链接应该垂直对齐,它应该在 Firefox 和 Internet Explorer 7 中工作。问题是,当我添加一个 float 时,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

最佳答案

在这里,试一试:

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

关于html - 在 IE7 中将 float 添加到灵活宽度的无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7112782/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com