How to center search box in navbar

问题: I am trying to center my search box in my navbar, but the search box displaces other items like the navigation items and logo Here is a pic of what i am trying to achieve...

问题:

I am trying to center my search box in my navbar, but the search box displaces other items like the navigation items and logo

Here is a pic of what i am trying to achieve enter image description here

vs a pic of what i'm getting enter image description here

it's really frustrating, below is what my navbar code looks like

    <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>

then the css for my search box

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;
}

for some reason it seems like the search form is taking full width on the navbar

Does anyone have any ideas as to what might be the cause

also i can't seem to keep the notification badges with the text its meant to follow( for example if i were to resize the browser the notification circles don't follow either the notification icon or cart

EDIT i have tried my best to replicate the navbar in the js fiddle below

JsFiddle

NB: stretch the output box of the fiddle horizontally to see the problem

adding bootstrap's 'col-md-6' fixes the issue and puts everything on the same line, although this is a very buggy fix and i'm sure there is a better way to go about this


回答1:

Alright man , It took me sometime to understand your code, But here you go. Remove you css and html and add this.

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>

Now you can add your remaining styling into this code. The Solution was display:flexbut you had so many unwanted styling in yours that prevented the flex from working

Hope this helps man.


回答2:

What you are looking for is called flexbox. Give your navbar the attributes

display: flex; and justify-content: space-between;.

Now if you group your divs in the navbar to .logo, .searchbar and .buttons they should be spread around.

Here is a small jsfiddle example.

And here is a great documentation with a lot of examples for flexbox (and other css stuff).


回答3:

try below code:

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

remove text-align: center from form.search input[type=text] if you want to align text from left.

  • 发表于 2019-01-15 00:26
  • 阅读 ( 219 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除