css - css 布局问题：用包含 ul 的 css 安排布局

Question

我正在尝试在内联中安排一个容器，但似乎在我的 css 中丢失了一些东西。似乎 class="second" 在使用 float:right 后不起作用。我的容器看起来像

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

更新的小提琴