添加新的 HTML 元素后，导航栏会变大

Question

我正在使用一个名为 Bulma 的 CSS 框架，我正在尝试在 Bulma navigation bar. I am trying to add the autocomplete functionality to the search bar. So, right below the input field, I added a panel-block 中实现一个搜索栏（这有点类似于 bootstrap 列表组）：

<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 左栏的大小以在桌面视图中查看）。

Answer 1

如果想让列表跳出父容器，可以设置position为absolute，宽度为100%（前提是父容器有position relative).

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

添加新的 HTML 元素后，导航栏会变大

Navigation bar gets larger as soon as a new HTML element is appended

javascript

html

css

bulma