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

Answer 1

如果希望列表突破其父容器，可以将position设置为absolute，将宽度设置为100％（前提是父容器具有position relative）。

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

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

1 个答案: