css 将搜索栏移动到导航栏的右侧

w8f9ii69 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(298)

我正在努力把我的搜索栏移到导航栏的最右边。我已经检查了其他的问题，但似乎没有解决我的工作。
一些帮助确定为什么会很好。

导航栏html

<nav class="navbar navbar-expand-lg fixed-top">
  <div class="nav-container">
    <div class="navbar-nav">
      <a class="nav-link" aria-current="page" href="{% url 'home' %}"
        >Home</a
      >
      <a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
      <a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a class="nav-link" href="{% url 'blog' %}">Blog</a>
      <a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
      <form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
        {% csrf_token %}
        <i class="fa fa-search"></i>
        <input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
        <button id="search-button" class="btn btn-primary-outline rounded-0">Search</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  </div>
</nav>

导航栏css

<style>
  .navbar {
    background: black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
    text-align: center;
    width: 100%;
  }
  .nav-container {
    display: inline-block;
    margin: 0 auto;
  }
  .navbar .navbar-nav {
    padding: 50px;
  }
  .navbar-name {
    text-decoration: none;
    color: white;
    margin-left: 50px;
    margin-right: 50px;
  }

css

来源：https://stackoverflow.com/questions/75340161/move-search-bar-to-right-hand-side-of-navbar

2条答案

按热度按时间

bxjv4tth1#

这是一个简单的解决方法。只需在搜索栏中添加一个浮动右CSS即可：

.navbar {
    background: black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
    text-align: center;
    width: 100%;
  }
  .nav-container {
    display: inline-block;
    margin: 0 auto;
  }
  .navbar .navbar-nav {
    padding: 50px;
  }
  .navbar-name {
    text-decoration: none;
    color: white;
    margin-left: 50px;
    margin-right: 50px;
  }
    .d-flex {
        float:right;
    }

<nav class="navbar navbar-expand-lg fixed-top">
  <div class="nav-container">
    <div class="navbar-nav">
      <a class="nav-link" aria-current="page" href="{% url 'home' %}"
        >Home</a
      >
      <a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
      <a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a class="nav-link" href="{% url 'blog' %}">Blog</a>
      <a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
      <form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
        {% csrf_token %}
        <i class="fa fa-search"></i>
        <input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
        <button id="search-button" class="btn btn-primary-outline rounded-0">Search</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  </div>
</nav>

- 如果运行代码段，请确保单击"整页"以查看效果。

赞(0）回复(0）举报 2023-02-06

eblbsuwk2#

我没有看到navbar-nav的任何样式。这是个问题，因为行中只有内联元素，这就是为什么表单在它下面。你需要添加d-flex。

<div class="navbar-nav d-flex">

并使用一些东西来调整元件的间距，参见https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

赞(0）回复(0）举报 2023-02-06

我来回答

css 将搜索栏移动到导航栏的右侧

2条答案

相关问题

热门标签

最新问答