html - Zurb Foundation 框架无法正常工作

Question

我正在尝试制作一个整洁的小型响应式网站，但我遇到了一致的问题，而且我似乎无法查明问题所在。

每当我制作菜单并使用

或其他元素时，它们都会变成纯 html，例如:所有列表元素都将带有元素符号并且只是纯文本，没有任何背景。

附件是示例图片:

我的代码是:

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

这是另一个例子:

我的代码是:

              <div class="row" style="float: right; display: table-cell;vertical-align: middle;"> 

                <button type="button" 
                        id="voltage_button"
                        onclick="measureVoltage();">
                    Voltage
                </button>

                <button type="button" 
                        id="octiv_current_button"
                        onclick="measureCurrent();">
                    Current
                </button>

                <button type="button" 
                        id="phase_button"
                        onclick="measurePhase();">
                    Phase
                </button>
               </div>

Answer 1

我不确定您到底想要什么，而且很难理解您想要什么，但据我了解，您希望元素符号点消失并内联菜单。

HTML:

 <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Web</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">Voltage</a></li>
          <li><a href="#">Current</a></li>
          <li><a href="#">Phase</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav> 

JS:

$(document).foundation();