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樣式 - 分導航成左右

回答

相關問題