html - 纯CSS float 问题

Question

我正在使用纯 CSS 框架，我的代码看起来像

<div class="container pure-g">

 <header class='pure-u-1'>
  <h1 class='logo'>
    <a href="#">TEST</a>
  </h1>
  <nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Example Link 1</a></li>
        <li><a href="#">Example Link 2</a></li>
    </ul>
  </nav>
 </header>
</div>

这是一个 JSfiddle:http://jsfiddle.net/ME4jv/

我想做的是将 Logo (向左浮动)与导航链接(向右浮动)对齐，但 float 和网格系统都不起作用。

Answer 1

不幸的是，您需要覆盖已分配给导航的框架宽度声明。目前它设置为 100%;。这就是它没有浮起来的原因。

演示 http://jsfiddle.net/ME4jv/2/

.pure-menu.pure-menu-open {
    float:right;
    display: block;
    width: auto;
}