纯css浮动问题

Question

我正在使用Pure 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/

我要做的是将徽标(左侧浮动)与导航链接(向右浮动)对齐,但浮动和网格系统都不起作用.

Answer 1

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

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

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