Html css样式-将导航分为左侧和右侧_Html_Css_Wordpress Theming

Html css样式-将导航分为左侧和右侧

html css

Html css样式-将导航分为左侧和右侧,html,css,wordpress-theming,Html,Css,Wordpress Theming,我的目标：我想把#nav分为左菜单和右菜单，每个菜单都有其最大宽度我想确保#导航、菜单左侧和右侧不是静态固定的。所以它会根据用户的设置进行扩展和收缩输出应该与我们在图片中看到的类似我在wordpress上做这件事。我想在顶部创建一个导航或简单的水平菜单我想做的是将原始菜单分为两部分，如下图所示（图片相当大，因此我将其作为链接保留）这里有一个现场演示这是我的css代码 #nav { background-color: #444444; line-height: 35px

我的目标：

我想把#nav分为左菜单和右菜单，每个菜单都有其最大宽度

我想确保#导航、菜单左侧和右侧不是静态固定的。所以它会根据用户的设置进行扩展和收缩

输出应该与我们在图片中看到的类似

我在wordpress上做这件事。我想在顶部创建一个导航或简单的水平菜单

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

（图片相当大，因此我将其作为链接保留）

这里有一个现场演示

这是我的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>

我将非常感谢您的帮助。非常感谢。

只需添加

宽度：1200px到CSS文件中的#nav

在这里工作

如果要使暗行填充页面的100%宽度，请执行以下操作：
HTML
<div id="nav">
  <div id="nav_wrapper">
    <ul id="menu-left">...</ul>
    <ul id="menu-right">...</ul>
  </div>
</div>

是否还要添加下面的额外行？
只需添加宽度：1200px到CSS文件中的#nav

在这里工作

如果要使暗行填充页面的100%宽度，请执行以下操作：
HTML
<div id="nav">
  <div id="nav_wrapper">
    <ul id="menu-left">...</ul>
    <ul id="menu-right">...</ul>
  </div>
</div>

您还想在下面添加额外的一行吗？
我不确定您到底想要什么，但如果我的猜测是正确的，您想要这样的内容：
<!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>


html，正文{
宽度：100%；
保证金：0；
填充：0；
}
#包装纸{
背景色：#444；
宽度：100%；
}
ul导航{
溢出：隐藏；
列表样式：无；
填充：0；
位置：相对位置；
宽度：600px；/*用于像Posh CSS这样的静态宽度*/
保证金：0自动；
}
李{
余量：0 10px；/*锂元素之间的间隙20px*/
}
李，左{
浮动：左；
}
李，对{
浮动：对；
}
李阿{
颜色：#fff；
}











让我知道这是否正确。
我不确定你到底想要什么，但如果我的猜测是正确的，你想要这样的东西：
<!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>


html，正文{
宽度：100%；
保证金：0；
填充：0；
}
#包装纸{
背景色：#444；
宽度：100%；
}
ul导航{
溢出：隐藏；
列表样式：无；
填充：0；
位置：相对位置；
宽度：600px；/*用于像Posh CSS这样的静态宽度*/
保证金：0自动；
}
李{
余量：0 10px；/*锂元素之间的间隙20px*/
}
李，左{
浮动：左；
}
李，对{
浮动：对；
}
李阿{
颜色：#fff；
}











让我知道这是否正确。
嗨。我感谢你的帮助。对不起，我把你弄糊涂了。从图中，未来的博客条目（文字）将显示在您在图中看到的水平双线条的宽度内。只需声明，即剩余标题和内容正文的宽度。正如你所说，它被设置为最大1200像素。因此，无论用户以何种分辨率观看，我打算制作的导航菜单都是最大化的。因此，导航菜单的内容分为左和右，如图所示。我渴望找到一种在马克斯左右跑动的方法，就像皮奇一样。再次感谢您的修复。我试过了，但仍然没有达到我的目的。1.我想把#nav分为左菜单和右菜单，每个菜单的最大宽度为1。我想确保#导航、菜单左侧和右侧不是静态固定的。所以它会根据用户的设置进行扩展和收缩。2.输出应该与我们在图片中看到的类似。嗨。我感谢你的帮助。对不起，我把你弄糊涂了。从图中，未来的博客条目（文字）将显示在您在图中看到的水平双线条的宽度内。只需声明，即剩余标题和内容正文的宽度。正如你所说，它被设置为最大1200像素。因此，无论用户以何种分辨率观看，我打算制作的导航菜单都是最大化的。因此，导航菜单的内容分为左和右，如图所示。我渴望找到一种在马克斯左右跑动的方法，就像皮奇一样。再次感谢您的修复。我试过了，但仍然没有达到我的目的。1.我想把#nav分为左菜单和右菜单，每个菜单的最大宽度为1。我想确保#导航、菜单左侧和右侧不是静态固定的。所以它会根据用户的设置进行扩展和收缩。2.输出应该与我们在图中看到的类似/浮动：左
选项？我选中了。我交换并操纵了它们，有些只是交换了位置。现在图像已经死了，所以它们不再有什么价值了。当你尝试float:right/浮动：左
选项？我选中了。我交换并操纵了它们，有些只是交换了位置。现在这些图像已经死了，所以它们不再有什么价值了。嗨。非常感谢。对这是我的意图。我只是加了一些左右的。如您所见，我希望将左右内容放置在靠近中心的位置（左右分开的位置），并且仅相隔一些px距离。换句话说，如果这是一行[]是宽度，|是分隔符，那么[empty-empty]中的箭头表示左右内容将扩展的方向。这是我尝试学习的演示。我只对导航部分感兴趣。poshcss.com是一个固定宽度的导航。更换最小宽度和m