CSS样式 - 分导航成左右

我想有#nav是分进菜单左和菜单的权利，各有其最大宽度
我想确保#nav，menu-left和right不是静态固定的。以便根据用户的设置进行扩展和缩小。
输出应该与我们在图片中看到的类似。

我在WordPress这样做。我想创建一个导航或简单地在顶部的水平菜单。

我想要做的是将原始菜单分为两部分，如下图所示。

http://i50.tinypic.com/zyaakl.jpg （图片是相当大的，所以我会离开它作为一个链接）

现场演示是在这里 http://www.i3physics.com/blog/?page_id=2

这是我的CSS代码

#nav { 
background-color: #444444; 
line-height: 35px; 
margin: 0 auto; 
overflow: hidden; 
} 

#nav ul { 
float: right; 
list-style: none; 
margin: 0 0 0 0; 
} 
#nav ul#menu-left { 
float: left; 
max-width: 700px; 
} 

#nav ul#menu-right { 
float: right; 
max-width: 500px; 

} 
#nav ul li { 
float: left; 
text-align: center; 
margin: 0; 
padding: 0 12px 0; 
} 
#nav ul li a, #nav ul li a:visited { 
float: left; 
color: #ffffff; 
font-size: 11px; 
font-family: Verdana,sans-serif; 
line-height: 35px; 
font-weight: normal; 
font-style: normal; 
font-variant: normal; 
text-transform: none; 
text-decoration: none; 
text-align: start; 
text-indent: 0px; 

} 
#nav ul li a:hover { 
color: #ffffff; 
text-decoration: underline; 
}

这是我的示例代码在header.php中

<body> 
<div id="nav"> 
    <ul id="menu-left"><?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?></ul> 
    <ul id="menu-right"><?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?></ul> 
</div>

我想要做的是将原始菜单分为两部分，如下图所示。

http://i50.tinypic.com/zyaakl.jpg （图片是相当大的，所以我会离开它作为一个链接）

所以我想到了最大化的左侧和右侧。然后进行保证金余额和保证金的权利。但这很丑陋。我想要质量。它可能会以不同的分辨率和不同的显示器毁坏显示器。

我甚至试过这样：

#nav ul#menu-left { 
float: right; 
max-width: 700px; 
} 

#nav ul#menu-right { 
float: left; 
max-width: 500px;

我将在这里得到任何帮助。非常感谢你。

来源

2010-06-25 CppLearner

当你尝试'float：right;'/'float：left'选项时发生了什么？ – 2010-06-25 22:53:07

我查过了。我互换和操纵了他们，有些只是互换了职位。 – CppLearner 2010-06-25 23:15:55

我不知道你问什么了，但如果我的猜测是正确的，你想是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
width:100%; 
margin:0; 
padding:0; 
} 
#wrapper { 
background-color:#444; 
width:100%; 
} 
ul.nav { 
overflow:hidden; 
list-style:none; 
padding:0; 
position:relative; 
width:600px; /* FOR a static width like Posh CSS */ 
margin:0 auto; 
} 
li { 
margin:0 10px; /* Gap between LI elements 20px */ 
} 
li.left { 
float:left; 
} 
li.right { 
float:right; 
} 
li a { 
color:#fff; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<ul class="nav"> 
<li class="left"><a href="#">left</a></li> 
<li class="left"><a href="#">left</a></li> 
<li class="left"><a href="#">left</a></li> 
<li class="left"><a href="#">left</a></li> 
<li class="left"><a href="#">left</a></li> 
<li class="right"><a href="#">right</a></li> 
<li class="right"><a href="#">right</a></li> 
<li class="right"><a href="#">right</a></li> 
</ul> 
</div> 
</body> 
</html>

让我知道，如果那是对的。

来源

2010-06-25 23:42:33 edl

嗨。谢谢。是。这是我的意图。 http://i48.tinypic.com/vy9yli.jpg我刚加了几个左右。正如你所看到的，我想将左右内容放置在靠近中心（左右分开的位置），并且距离相隔一定距离。换句话说，如果这是行[]是宽度，并且|是分隔符，然后[empty empty empty <----- empty empty |空虚----->虚空虚空]其中箭头代表左右内容将扩展的方向。 – CppLearner 2010-06-26 00:02:23

这是我试图学习的演示。 http://poshcss.com/我只对导航部分感兴趣。 – CppLearner 2010-06-26 00:03:23

poshcss.com是一个固定宽度的导航。在'ul.nav'中用'width'属性替换'min-width'和'max-width'会得到类似的结果：检查上面的编辑。 – edl 2010-06-26 01:05:54

只是在你的CSS文件

添加width:1200px;到#nav在这里工作 http://grab.by/58ZH

如果你想保持暗行填充页面的宽度为100％：

HTML

<div id="nav"> 
    <div id="nav_wrapper"> 
    <ul id="menu-left">...</ul> 
    <ul id="menu-right">...</ul> 
    </div> 
</div>

CSS

#nav ul #menu-left { 
    float:left; 
    max-width:700px; 
} 

#nav u l#menu-right { 
    float:right; 
    max-width:500px; 
} 
#nav_wrapper { 
    margin: 0 auto; 
    width: 1600px; 
}

您是否还想在下面添加额外的行？

来源

2010-06-25 22:39:44 GerManson

嗨。我很感激你的帮助。如果我困惑你，我很抱歉。从图片中，未来的博客条目（文字）将显示在您在图片中看到的水平双线条的宽度内。简单地说，就是剩余标题和内容主体的宽度。正如你所说，它被设置为最大1200px。因此，我打算制作的导航菜单对于用户正在查看的任何分辨率都是最大化的。因此，导航菜单的内容分为左右两部分，如图所示。我渴望找到一种方法来在最大限度左右，并喜欢图片 – CppLearner 2010-06-25 22:50:16

嗨。再次感谢您的修正。我尝试过，但仍然不适合我的目的。 1.我希望将#nav分为菜单左侧和菜单右侧，并且每个都有其最大宽度 1. 我想确保#nav，菜单左侧和右侧不是静态修复的。以便根据用户的设置进行扩展和缩小。 2. 输出应该与我们在图片中看到的类似。 – CppLearner 2010-06-25 23:33:11

CSS样式 - 分导航成左右

回答

相关问题