基础将进度条插入顶栏

Question

我使用框架Foundation 5，我使用top bar，我想在顶栏中插入一个简单的progress bar

唯一的问题是进度条不是水平的而是垂直的。这真的很奇怪，我不知道如何纠正这个问题。

jsfiddle

<nav class="top-bar" data-topbar="">
  <!-- Title -->
  <ul class="title-area">
    <li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>

    <!-- Mobile Menu Toggle -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <!-- Top Bar Section -->

<section class="top-bar-section">


    <!-- Top Bar Right Nav Elements -->
    <ul class="right">

       <!-- progess bar bug -->
       <li>
           <div class="progress">
              <span class="meter"></span>
            </div>
      </li>
      <li class="divider"></li>

      <!-- Anchor -->
      <li><a href="#">Generic Button</a></li>
      <li class="divider"></li>

      <!-- Button -->
      <li class="has-form show-for-large-up">
        <a href="http://foundation.zurb.com/docs" class="button">Get Lucky</a>
      </li>
    </ul>
  </section></nav>

Answer 1

它不是垂直的，它没有宽度。

修正：

div.progress{
    width: 500px;
}