时间戳

首页 > 解决方案 > 如何使用文本和图标创建导航栏？

html - 如何使用文本和图标创建导航栏？

问题描述

如何使用搜索表单图标创建与堆栈溢出导航栏相同的导航栏。我使用它，但找不到方法。

            <div class="form-group">
                <input type="text" name="search" class="form-control" placeholder="Search here..">
            </div>
            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
        </form>```

标签： htmlcsssearchheadernavbar

解决方案

您使用 DIV 来包含每组代码并使用 CSS 排列它们。我更改了 div 类 form-group 以将整个表单包含在一个容器中。您可以使用类 topnav 在搜索栏旁边包含您想要的图像或文本。只需一点 CSS 和你的方式！

<div class="topnav">
  <a>Stack Overflow</a>
  <div class="form-group">
    <form>
      <input type="text" name="search" class="form-control" placeholder="Search here..">
      <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

推荐阅读