Html 纯css-在'中嵌套表单；浮动：右'；下拉菜单项

有两件事

将表单嵌套在菜单项中可以工作，除非它再次隐藏 鼠标从窗体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

欢迎使用堆栈溢出！你可以选择第一个，学习并创建一个例子。我将编辑这个问题以包含一个示例理想情况下，真正有用的是发布相关的代码以及一个JSFIDLE链接或类似的东西来演示这个问题。这样一来，人们就可以方便地使用jsfiddle演示，但未来的人们不再依赖于仍然在工作的jsfiddle链接。好的，我来做。但这只是因为你做了，我的好兄弟