css - css レイアウトの問題: ul を含む css でレイアウトを配置する

Question

コンテナーをインラインで配置しようとしていますが、css に何かが欠けているようです。float:right を使用した後、 class="second" が機能しないようです。私のコンテナは次のようになります

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

CSSに何かが欠けているようです

私のjsfiddleリンク： http://jsfiddle.net/pttVq/1/

Answer 1

まあ、ULもインラインにする必要があります...デフォルトではブロック要素であるためです。

ul {display: inline;}

しかし、それではおそらくあなたが探している効果を得ることはできません。ULも左に浮かせてみてください。

ul {float: left;}

Answer 2

なぜあなたはそれをこのようにしないのですか

<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>

フィドルでそれを見る

境界線の削除

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

更新されたフィドル