CSS和div排版的问题,在线等答案

mib23 2010-08-13 12:58:11
我要的效果是图片在左边,文字导航在右边。我的页面在IE8和FireFox下都是好的,在IE6下面图片和右边的文字不是在同一行的,文字在图片的下面一行了。第一行<!DOCTYPE...去掉的话,在IE8下面也不行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
</title>
<style type="text/css">
#top #catalog
{
float:right;
}
#top #catalog li
{
width:95px;
float:left;
}
</style>
</head>
<body>
<div id="top"><a href="Default.aspx">
<img alt="logo" title="logo" src="logo.gif" /></a>
<ul id="catalog">
<li>首页</li>
<li>新闻中心</li>
<li>产品与服务</li>
<li>成功案例</li>
<li>关于我们</li>
</ul>
</div>
</body>
</html>
...全文
164 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
fengyuananan 2010-08-17
  • 打赏
  • 举报
回复
搜搜浏览器兼容,学习学习
WebAdvocate 2010-08-13
  • 打赏
  • 举报
回复
这个是由于 IE 的浮动 bug 造成的。IE8去掉DOCTYPE后,运行在兼容性模式下,所以会跟IE6中一样

加上这个样式就好了:
#top a{
float: left;
}
lxh75911 2010-08-13
  • 打赏
  • 举报
回复
<div style=" float:left">
<a href="Default.aspx"><img alt="logo" title="logo" src="logo.gif" /></a>
</div>

给你的img设置float:left就可以了
zonglp 2010-08-13
  • 打赏
  • 举报
回复
我试着写了下,我感觉这个的我感觉主要是浮动造成的,要清除一下。
zonglp 2010-08-13
  • 打赏
  • 举报
回复
<!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=gb2312" />
<title>dd</title>
<style type="text/css">
html,body{margin:0;padding:0;font:12px;}
ul,li{list-style:none;margin:0;padding:0}
li{float:left;width:95px;}

</style>
</head>
<body>

<div style="float:left"><a href="#"><img alt="logo" title="logo" src="logo.gif" /></a></div>
<div class="clear:both;"></div>
<ul style="float:right;">
<li>首页</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
</ul>

</body>
</html>
蝶恋花雨 2010-08-13
  • 打赏
  • 举报
回复
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<style type="text/css">
#top #catalog
{
float:right;
}
#catalog li
{
width:95px;
float:left;
}
</style>
</head>
<body>
<div id="top">

<div style="float:left" ><a href="Default.aspx">
<img alt="logo" title="logo" src="logo.gif" /></a>

</div>
<div style=" float:right" >
<ul id="catalog">
<li>首页</li>
<li>新闻中心</li>
<li>产品与服务</li>
<li>成功案例</li>
<li>关于我们</li>
</ul>
</div>

</div>
</body>
</html>


给你改好了
whltian 2010-08-13
  • 打赏
  • 举报
回复
ul
{ margin:0;
padding:0;
list-style:none;
}
whltian 2010-08-13
  • 打赏
  • 举报
回复
这个我也出现过这种情况 把ul margin:0;
padding:0;
leihai3000 2010-08-13
  • 打赏
  • 举报
回复
要不,楼主试试这个~~~弱弱滴飘过

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#top #catalog
{
float:right;
}
#top #logo {float:left;}
#top #catalog li
{
width:95px;
float:left;
}
</style>
</head>

<body>
<div id="top">
<div id="logo"><a href="Default.aspx"><img alt="logo" title="logo" src="logo.gif" /></a></div>
<ul id="catalog">
<li>首页</li>
<li>新闻中心</li>
<li>产品与服务</li>
<li>成功案例</li>
<li>关于我们</li>
</ul>
</div>
</body>
</html>


61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧