html - 纯css浮动问题

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/

我要做的是将徽标（向左浮动）与导航链接（向右浮动）对齐，但浮动和网格系统都不起作用。

Answer 1

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

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

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