css 问题导般栏求助感谢‘JayKing’

lore · 发表于 2008-12-13 13:08:57

本帖最后由 lore 于 2008-12-13 14:09 编辑

#header { margin: 0 0 20px;}
.headerwarp { margin: 0 auto; padding: 0 5px; width: 960px; height: 55px; background: #3b5998; color: #FFF; border-bottom:
3px solid #bbb;}
.headerwarp a { color: #FFF; }
.headerwarp .logo { float: left; margin: 0 30px 0 0; }
.menu { float: left; height: 25px; font-size: 14px; font-weight: bold; }
.menu li { float: left; padding: 15px; line-height: 20px; vertical-align: top; }
.menu .edit { padding-left: 4px; color: #CCC; font-size: 12px; font-weight: normal; }
.nav_account { float: right; width: 188px; height: 55px; }

复制代码

<div id="header">
<div class="headerwarp">
<h1 class="logo"><a href="index.php"><img src="image/logo.gif" alt="好讨厌" /></a></h1>
<ul class="menu">
<li><a href="space-home.html">首页</a></li>
<li><a href="space.html">个人主页</a></li>
<li><a href="space-friend.html">好友</a></li>
<li><a href="network.html">随便看看</a></li>
<li><a href="space-pm.html">消息</a></li>
</ul>
－－－－－－－－－－－－－－－－－－－－－－
<ul class="menu">
<li><a href="space-home.html">首页</a></li>
<li><a href="space.html">个人主页</a></li>
<li><a href="space-friend.html">好友</a></li>
<li><a href="network.html">随便看看</a></li>
<li><a href="space-pm.html">消息</a></li>
</ul>
－－－－－－－－－－－－－－－－－－－－－－
我想要这里显示两行，可是加上以上部分的代码就乱显示了
<div class="nav_account">
<a href="space-1.html" class="login_thumb"><img src="http://www.haotaoyan.com/51_Fuck/avatar.php?uid=1&size=small&type=virtual" alt="admin" width="20" height="20" /></a>
<a href="space-1.html" class="loginName">admin</a>
<br />
<a href="cp.php?ac=invite">邀请</a> | <a href="cp.php">设置</a> | <a href="cp.php?ac=privacy">隐私</a> | <a href="cp.php?ac=common&op=logout">退出</a>
</div>
</div>
</div>

复制代码

我想要这种效果

谁告诉我代码应该怎么写

lore · 发表于 2008-12-13 13:15:08

谁知道啊

JayKing · 发表于 2008-12-13 13:20:40

在ul外面加个div，设置高度及宽度，设置ul的高和宽，宽跟DIV一样，高设置为DIV的一半

lore · 发表于 2008-12-13 13:23:48

本帖最后由 lore 于 2008-12-13 13:30 编辑

在ul外面加个div，设置高度及宽度，设置ul的高和宽，宽跟DIV一样，高设置为DIV的一半
JayKing 发表于 2008-12-13 13:20

我就是按此方法测试过后还是无法正常显示之后才来这里求助的...

ul 外面加个<div class="header_menu">

这样做结果是无法与<div class="nav_account">在同一平行上

<div class="header_menu"><ul class="menu">... 在这里
<div class="nav_account">在这里

JayKing · 发表于 2008-12-13 13:30:35

本帖最后由 JayKing 于 2008-12-13 13:33 编辑

<!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>无标题文档</title>
<style>
ul li { list-style: none; }
#main {
width:960px;
height:50px;
}
.menu1 , .menu2 {
float: left;
height: 25px;
font-size: 14px;
font-weight: bold;
width:960px;
}
.menu1 li , .menu2 li{
float: left;
padding: 15px;
line-height: 25px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="main">
<ul class="menu1">
<li><a href="space-home.html">首页</a></li>
<li><a href="space.html">个人主页</a></li>
<li><a href="space-friend.html">好友</a></li>
<li><a href="network.html">随便看看</a></li>
<li><a href="space-pm.html">消息</a></li>
</ul>
<ul class="menu2">
<li><a href="space-home.html">首页</a></li>
<li><a href="space.html">个人主页</a></li>
<li><a href="space-friend.html">好友</a></li>
<li><a href="network.html">随便看看</a></li>
<li><a href="space-pm.html">消息</a></li>
</ul>
</div>
</body>
</html>

复制代码

帮你写一段示例~~呵呵~~~虽然写起来很简单，但是你还是自己仿照着写吧，自己解决问题才会进步

JayKing · 发表于 2008-12-13 13:37:21

我就是按此方法测试过后还是无法正常显示之后才来这里求助的...

ul 外面加个

这样做结果是无法与在同一平行上

... 在这里
在这里
lore 发表于 2008-12-13 13:23

这个问题给div加一个浮动，float:left即可，宽度别太大

JayKing · 发表于 2008-12-13 13:38:40

另外在nav_account最后加入一个清除浮动层，不然可能会出错 <div style="clear:both;"></div>

lore · 发表于 2008-12-13 13:47:53

老大你去看看吧 haotaoyan.com 还是不行啊

		自动登录	找回密码
密码			立即注册

[已解决] css 问题导般栏求助感谢‘JayKing’

本帖子中包含更多资源

[已解决] css 问题 导般栏 求助 感谢‘JayKing’

本帖子中包含更多资源

[已解决] css 问题导般栏求助感谢‘JayKing’