2013-03-07 127 views
1

我想安排一個內聯的容器,但似乎在我的CSS中缺少一些東西。 看起來像class =「second」在使用float:right後不起作用。 我的容器看起來像css佈局問題:安排一個包含ul的css佈局

<nav id="main"> 
    <a>First</a> 
    <ul></ul> 
    <a>Second</a> 
</nav> 

好像我缺少在我的CSS東西

我的jsfiddle鏈接:http://jsfiddle.net/pttVq/1/

+0

本文可能有助於http://html5doctor.com/nav-element/ – VKen 2013-03-07 04:45:45

回答

2

好,UL必須是內聯太...因爲它是一個塊元素默認。

ul {display: inline;} 

但是,這可能不會得到你正在尋找的效果。嘗試將ul留在左邊。

ul {float: left;} 
+0

感謝看起來像ul,{float:left;}解決了這個問題。 – paul 2013-03-07 04:47:01

+0

很高興能有所幫助。 :)不要忘記將它設置爲接受的答案! :) – 2013-03-07 04:47:54

0

你爲什麼不讓它這樣

<nav id="main"> 

    <ul> 
     <li> <a href="#" class="first">First</a></li> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li><a href="#" class="second">Second</a></li>   
    </ul> 

</nav> 

看到它在fiddle

和消除邊界

li:nth-of-type(1), li:nth-last-of-type(1){ 
border:none; 
} 

更新fiddle

+0

有限制,因爲我動態生成所有這些內容,這會造成我的UL項目的問題。我需要讓他們分開。 – paul 2013-03-07 04:44:28

+0

好的,然後用Andrew McGivery的答案 – 2013-03-07 04:47:14