0

我有以下 HTML：

<div class='layout-wrap'>
  <div class='mod-header'>
    <a class='logo' href="#"></a>
    <nav>
      <a class="action" href="#">Join now</a>
      <ul class="tour">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
      <ul class="search">
        <li><a class="find" href="#">search</a></li>
      </ul>
    </nav>
  </div>
</div>

也可以看看：

http://jsfiddle.net/mulderp/fZ8cW/

和 CSS：

.logo {
    text-indent: -9999px;
    float: left;
    width: 16rem;
}

nav {
   float: right;
   display: block;
}

.mod-header nav a {
   float: left;
}

什么是最小响应式布局解决方案（例如使用 Susy）：

  • a.logo 始终可见（也适用于小屏幕）
  • a.action 始终可见（也适用于小屏幕）
  • a.find 始终可见
  • ul.tour 对于小屏幕是隐藏的

不确定这是否容易实现，但知道是否会很有帮助。

编辑：

更窄的问题：如何防止小问题右侧部分的导航中断，并隐藏 ul.tour ？

导航中断

苏西萨斯：

.mod-header
  @include container
  clear: both
  border: 2px red solid
  +rem('height', 70px)

  .logo
    text-indent: -9999px
    float: left
    +rem('width', 120px)
    +rem('height', 29px)
    +rem('margin', 20px 0)
    border: 2px blue solid
    +data-uri-bg('logo.png')

  nav
    @include span-columns(4,12)
    border: 2px blue solid
    float: right
    +rem('margin', 20px 0)
    +rem('height', 29px)

    ul
      li
        float: left
        +rem('margin', 0 8px)
4

0 回答 0