Question

我正在建立一个网站，我必须让它“先移动”。所以我正在使用Zurb的Foundation，因为我觉得它更容易。

所以我有这段代码：

/* General */

/* Header */

@media only screen and (min-width: 40.063em) { 

  .logo-wrapper {
    position: relative;
  }

  .logo-wrapper .logo {
    width: 92px;
    height:  92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -2px;
    margin-top: 60px;
    margin-left: -46px;
  }

  .top-bar{
  	height: 150px;
  }

  // Right part
  .top-bar-section ul.right {
    width: 50%;
    padding-left: 60px;
  }
  
  .top-bar-section ul.right li {
    float:  left;
  }

  // Left part
  .top-bar-section ul.left {
    width:  50%;
    padding-right: 60px;
  }

  .top-bar-section ul.left li {
    float:  right;
  }
  .top-bar li{
  	margin-top: 60px;
  	margin-left: 25px;
  	margin-right: 25px;
  }
}

<!-- Navigation -->
<div class="contain-to-grid sticky">

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a class="logo show-for-small-only" href="#"><img src="http://placehold.it/50x50" /></a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>

  <section class="top-bar-section">
    
    <div class="logo-wrapper hide-for-small-only">
      <div class="logo">
        <img src="http://placehold.it/350x150">
      </div>
    </div>

    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
    <!-- Left Nav Section -->
    <ul class="left">
      <li> <a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a></li>
      <li><a href="#">Menu 5</a></li>
     </ul>
  </section>
</nav>

</div><!-- /navigation -->

所以这里的问题是，这个代码完全适用于桌面和移动设备，但是当它像一个中等大小的屏幕时，让我们说平板电脑不起作用，它看起来很糟糕。

我无法发布图片供你们观看。

但我希望有人可以帮助我

Answer 1

我想我知道你的问题是什么。 .top-bar li块内的左右边距太多，导致某些导航项在中型屏幕上突破顶部条形容器。我只是粗略地看一下这个问题，但它似乎成了大约900px的问题。对此的快速解决方法是添加媒体查询并在此时调整边距：

.top-bar li {
  margin-top: 60px;
  margin-left: 25px;
  margin-right: 25px;

  @media only screen and (max-width: 56.25em) { // 56.25em = 900px 
    margin-left: 6px;
    margin-right: 6px;
  }
}

Codepen：http://codepen.io/thmsmtylr/pen/VvaQOr

希望有所帮助。

移动导航栏无法在Foundation工作

1 个答案: