javascript - 一旦附加了新的 HTML 元素，导航栏就会变大

Question

我正在使用一个名为 Bulma 的 CSS 框架，我正在尝试在 Bulma 中实现一个搜索栏 navigation bar .我正在尝试将自动完成功能添加到搜索栏。所以，在输入字段的正下方，我添加了一个 panel-block。 (这有点类似于引导列表组):

<input class="input" type="text" placeholder="Text input">
<ul>
    <li><a class="panel-block" href="#">Lorem</a></li>
    <li><a class="panel-block" href="#">Ipsum</a></li>
    <li><a class="panel-block" href="#">Dolor</a></li>
    <li><a class="panel-block" href="#">Sit</a></li>
    <li><a class="panel-block" href="#">Amet</a></li>
</ul>

但是因为这个无序列表仍然是导航栏的一部分，所以导航栏将所有这些列表项都包裹起来了，这使得导航栏变大了。这是我的导航栏的内容:

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

    <button class="button navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>

  <div class="navbar-end">
    <div class="navbar-item field">
        <div class="control">
            <input class="input" type="text" placeholder="Text input">
            <ul>
                <li><a class="panel-block" href="#">Lorem</a></li>
                <li><a class="panel-block" href="#">Ipsum</a></li>
                <li><a class="panel-block" href="#">Dolor</a></li>
                <li><a class="panel-block" href="#">Sit</a></li>
                <li><a class="panel-block" href="#">Amet</a></li>
            </ul>
        </div>
    </div>
  </div>
</nav>

我尝试添加 style="overflow: hidden;"到根 <nav>元素。没用。如何在不放大导航栏的情况下显示列表项？

可以在这个 JSFiddle 上找到完整的演示(请缩小 JSFiddle 左栏的大小以在桌面 View 中查看它)。

Answer 1

如果你想让列表跳出它的父容器，你可以设置position为absolute，宽度为100%(前提是父容器有相对的位置。

此处示例:http://jsfiddle.net/wn03dsj8/2/