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>

在fiddle

中查看

并删除边框

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

更新fiddle

css布局问题：使用包含ul的css排列布局

2 个答案: