我想安排一個內聯的容器,但似乎在我的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/
我想安排一個內聯的容器,但似乎在我的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/
好,UL必須是內聯太...因爲它是一個塊元素默認。
ul {display: inline;}
但是,這可能不會得到你正在尋找的效果。嘗試將ul留在左邊。
ul {float: left;}
感謝看起來像ul,{float:left;}解決了這個問題。 – paul 2013-03-07 04:47:01
很高興能有所幫助。 :)不要忘記將它設置爲接受的答案! :) – 2013-03-07 04:47:54
你爲什麼不讓它這樣
<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
有限制,因爲我動態生成所有這些內容,這會造成我的UL項目的問題。我需要讓他們分開。 – paul 2013-03-07 04:44:28
好的,然後用Andrew McGivery的答案 – 2013-03-07 04:47:14
本文可能有助於http://html5doctor.com/nav-element/ – VKen 2013-03-07 04:45:45