Question

两件事，

将一个表单嵌套在菜单项中是有效的，除了它再次隐藏了鼠标从表格div移动。

此表单菜单项右对齐且表单最左边距与按钮的最左边缘对齐，以便实际窗体流过窗口

<div class="home-menu pure-menu pure-menu-horizontal">
  <a class="pure-menu-heading pure-menu-link" href="/">My Hip New Brand</a>

  <ul class="pure-menu-list">
    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact Us</a></li>
    <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
  </ul>

  <ul class="pure-menu-list" style="float:right">
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"><a href="#" class="pure-menu-link">Sign In</a>

      <form action="/login" method="POST" class="pure-form pure-menu-children">
        <fieldset class="pure-group">
          <input name="username" type="text" placeholder="Username" class="pure-input-2-1" required/>
          <input name="password" type="password" placeholder="Password" class="pure-input-2-1" required/>
        </fieldset>

        <button type="submit" class="pure-button pure-input-2-1 pure-button-primary">Sign In</button>
      </form>

    </li>
  </ul>
</div>

编辑：可以找到jsfiddle here

纯css - 在'float：right'下拉菜单项中嵌套表单

0 个答案: