Question

我的目标：

我希望#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;

我将在此感谢任何帮助。非常感谢你。

Answer 1

我不确定你要求的是什么，但如果我的猜测是正确的，你想要这样的东西：

<!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>

请告诉我这是否正确。

Answer 2

只需将width:1200px;添加到CSS文件中的#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;
}

你还想在下面添加额外的行吗？

css风格 - 将导航分为左右两侧

2 个答案: