Question

我正在尝试将搜索框放在导航栏中，但是搜索框会替换其他项，例如导航项和徽标

这是我要实现的目标的图片

对比我得到的照片

这真令人沮丧，下面是我的导航栏代码

    <nav class="navbar navbar-default" id="title">
                    <div class="container">
                        <a href="index" class=" navbar-brand ">
                            <img src="/assets/img/logo.png" srcset="/assets/img/logo2.png 2x, img/logo3.png 3x" alt="Post">
                        </a>
<!-- the search container -->
                        <div class="search-container">
                            <form class="search" action="/action_page.php">
                                <input class="" type="text" placeholder="Search.." name="search">
                                <button type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-navbar-collapse">

                            <ul class="nav navbar-nav main-navbar-nav">
                                <li><a href="#xcart" class=" fa fa-cart-plus" onclick="toggle_visibility('myCart');"> Cart</a></li>
                                <span class="header-icons-noti-top-aft">5</span>

                                <li><a href="#xcart" class=" fa fa-bell" onclick="toggle_visibility('myNotification');"></a></li>
                                <!-- /.navbar-collapse -->
                                <span class="header-icons-noti-noti">1</span>


                                <li><a href="#xaccount" class=" fa fa-user-o" onclick="toggle_visibility('myForm');"> Hi,
                                        <b>
                                            <?php if (isset($_SESSION['user'])){ echo $_SESSION['firstname']; } else {echo "Login"; }?></b> <i class="fa fa-caret-down"></i></a></li>

                        </div>
                    </div>
                </nav>

然后为我的搜索框添加CSS

form.search {
    margin: 0 auto;
}


form.search input[type=text] {

    color: #333;
    background-color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 10px;
    display: inline-block;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    border: 2px solid #777;
    width: 350px;
    margin-right: 0px;
    border-right: none;
}

form.search button {
    color: white;
    background-color: brown;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 10px;
    display: inline-block;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    border: 2px solid brown;
    width: 120px;
    margin-left: -3px;
    border-left: none;
}

form.search button:hover {
    background: brown;

}

form.example input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
}

form.example button {

    width: 20%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

form.example button:hover {
    background: #0b7dda;
}

form.example::after {
    content: "";
    clear: both;
    display: table;
}

由于某种原因，搜索表单似乎在导航栏上占据了全角

有人对可能的原因有任何想法

同样，我似乎也不会在通知徽章上保留其要遵循的文字（例如，如果我要调整浏览器的大小，则通知圈子不会跟随通知图标或购物车

编辑我已尽力在下面的js小提琴中复制导航栏

JsFiddle

注意：水平拉伸小提琴的输出框以查看问题

添加bootstrap的'col-md-6'可以解决此问题，并将所有内容放到同一行，尽管这是一个非常小的错误修复程序，而且我敢肯定有更好的方法解决此问题

Answer 1

好的，我花了一些时间来理解您的代码，但是到了。删除您的CSS和HTML并添加它。

CSS

form.search input[type="text"] {
    color: #333;
    background-color: white;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 10px;
    display: inline-block;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    border: 2px solid #777;
    width: 350px;
    margin-right: 0px;
    border-right: none;
  }

  form.search button {
    color: white;
    background-color: brown;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 10px;
    display: inline-block;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    border: 2px solid brown;
    width: 120px;
    margin-left: -3px;
    border-left: none;
  }

  .fa-search:before {
    content: "\f002";
  }

  .navbar-default .navbar-collapse {
    float: right;
    border-top: none;
    padding-left: 0;
    padding-right: 0;
  }

  .header-icons-noti-top-aft {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #111111;
    color: white;
    font-family: Montserrat-Medium;
    font-size: 12px;
  }

  .fa-bell:before {
    content: "\f0f3";
  }

  .header-icons-noti-noti {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #111111;
    color: white;
    font-family: Montserrat-Medium;
    font-size: 12px;
  }

  #title {
    display: flex;
    justify-content: space-between;

  }

  #navbarTest {
    display: flex;
  }

HTML

    <nav class="navbar navbar-default">
  <div class="container" id="title">
    <div class="test1">
      <a href="index" class=" navbar-brand ">
        <img
          src="/assets/img/logo.png"
          srcset="/assets/img/logo2.png 2x, img/logo3.png 3x"
          alt="Post"
        />
      </a>
    </div>
    <div class="search-container" >
      <form class="search" action="/action_page.php">
        <input class="" type="text" placeholder="Search.." name="search" />
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <div
      class="collapse navbar-collapse"
      id="bs-navbar-collapse"
    >
      <ul class="nav navbar-nav main-navbar-nav" id="navbarTest">
        <li>
          <a
            href="#xcart"
            class=" fa fa-cart-plus"
            onclick="toggle_visibility('myCart');"
          >
            Cart</a
          >
        </li>
        <span class="header-icons-noti-top-aft">5</span>

        <li>
          <a
            href="#xcart"
            class=" fa fa-bell"
            onclick="toggle_visibility('myNotification');"
          ></a>
        </li>
        <!-- /.navbar-collapse -->
        <span class="header-icons-noti-noti">1</span>

        <li>
          <a
            href="#xaccount"
            class=" fa fa-user-o"
            onclick="toggle_visibility('myForm');"
          >
            Hi
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

现在，您可以将其余样式添加到此代码中。解决方案是display:flex，但您的样式太多了，导致Flex无法正常工作

希望这对人有帮助。

Answer 2

您要寻找的东西叫做flexbox。给您的导航栏属性

display: flex;和justify-content: space-between;。

现在，如果您将导航栏中的div分组为.logo，.searchbar和.buttons，则它们应该分散分布。

Here is a small jsfiddle example.

here是一个很棒的文档，其中包含很多有关flexbox（和其他CSS东西）的示例。

Answer 3

尝试以下代码：

.search-container{
   margin-left: auto;
   margin-right: auto;
}

如果要从左对齐文本，请从text-align: center中删除form.search input[type=text]。

如何在导航栏中居中搜索框

3 个答案: