2010-11-19 80 views
0

我想獲得一個導航欄,其中包含一個無序列表的導航欄,以對齊頁面寬度的右側。淨資產值本身應跨越整個寬度(這是在整個頁面中的黑條),但鏈接本身應當與內容寬度的權利,就像這樣:如何做到這一點浮動/對齊沒有額外的div?

|          home | about | etc.    | 
|                   | 
|   This is content with a fixed with in the center    | 
|   of the page.             | 

的HTML我有:

<nav> 
<ul id="navlist"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">about</a></li> 
    <li><a href="#">etc,</a></li> 
</ul> 
</nav> 

CSS:

nav { 
    display:block; 
    background:#000; 
} 

    nav ul { 
    margin: 0 auto; 
    width: 777px; 
    } 
    nav ul li { 
    float:left; 

    } 

但是,當然,這是在頁面的左側,我似乎無法得到它的權利,沒有添加額外的div元素......唯一的選擇是浮動的<li>的權利,但這意味着我的導航是相反的順序,我真的不希望這...這是一個自動生成的wordpress安裝頁面的列表,所以我可以然後在管理面板中反向排序頁面但不得不改變後端的東西並不是處理設計的好方法。

有人嗎?

+0

啊,謝謝凱爾。猜猜出了問題:P – 2010-11-19 12:42:35

回答

1
nav { 
    display:block; 
    background:#000; 
    text-align:right;  
} 

    nav ul { 
    margin: 0 auto; 
    width: 777px; 
    } 
    nav ul li { 
    display: inline; 

    } 
+0

試過了,沒有工作:( – 2010-11-19 12:46:12

+0

你不需要浮子,我貼了整件東西 – naugtur 2010-11-19 12:46:51

+0

嗯,很好,我猜我必須找到一種方式來設計li元素現在,但我認爲inline-block可以適用於大多數瀏覽器,謝謝! – 2010-11-19 12:49:56