如何使导航栏中的搜索表单填充两个 div 元素之间的空间？

Question

我正在尝试制作一个导航栏，其中搜索表单将始终填充导航栏左右部分/div之间的空间，亚马逊就是这种搜索表单的一个示例。

过去两个小时我尝试了多种方法，但搜索栏似乎不想更改宽度，除非我手动设置。

完整代码： http://jsfiddle.net/asoctyk9/

HTML：

<nav>
    <ul>
        <div class="navbar-main-wrapper">
            <div class="navbar-left-wrapper">
                <li><a href="/" >Home</a></li>
                <li><a href="profile" >My Account</a></li>
                <li><a href="contact" >Contact</a></li>
            </div>
            <div class="navbar-right-wrapper">
                <li><a href="login" id="nav-sign-in">Sign In</a></li>
                <li><a href="register" id="nav-register">Register</a></li>
                <li><a href="logout" id="nav-logout" onclick="logoutConfirm()">Logout</a></li>
                <script>
                    //...
                </script>
                <li><a href="about">About</a></li>
            </div>
            <!-- MIDDLE FILL -->
            <div class="navbar-search-wrapper">
                <li>
                    <form action="/search" id="searchform" method="GET">
                        <input type="search" name="search" placeholder="What are you looking for..." /> 
                        <button type="submit" form="searchform"><i class="fa fa-search"></i></button>
                    </form>
                </li>
            </div>
        </div>
    </ul>
</nav> 

CSS：

nav {
    margin-bottom: 30px;
}
nav ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    /*overflow: hidden;*/
    background-color: #232f3e;   
    height: 47px;
    padding-bottom: 5px;
}

nav li {
    display: inline-block;
    padding-right: 2px;
    padding-left: 2px;
}

nav .navbar-left-wrapper {

    padding-left: 10%;
    float: left;
}
nav .navbar-right-wrapper {
    float: right;
    padding-right: 10%;
}

nav .navbar-main-wrapper {
    margin: 0 auto;
    max-width: 1460px;
    min-width: 1100px;
}

nav li a {
    display: block;
    color: white;
    /*text-align: center;*/
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10%;
}

nav li a:hover:not(.active) {
    background-color: #485769; 
}

nav li a#nav-logout:hover:not(.active) {
    background-color: rgb(221, 34, 34);
}

nav a.active {
    background-color: #586a80;
}

nav input[type=search] {
    height: 40px;  
    font-size: 16px;
    background-color: none;
    padding: 10px 20px 10px 20px;

    display: inline-block; 

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border:none;
    resize:none;

    margin: 4px 0px 4px 0px;

    font: inherit;
    font-size: 14px;
    font-weight: normal;

    padding: 10px;

}

nav input[type=search]:focus {
    outline: none;
}
nav .navbar-search-wrapper {
    display: inline-block;
    /*border: 2px solid red;*/
}

nav .navbar-search-wrapper button {
    float: right;
    padding: 10px 10px;
    margin-top: 4px;

    background: #ffa807;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

nav .navbar-search-wrapper button:hover {
    background: #ff8808;
}

当我缩小页面时，搜索栏会向左移动。我希望它“坚持”到navbar-right-wrapper 的第一个元素和navbar-left-wrapper 的最后一个元素，并在用户缩小页面时展开，基本上总是填充链接之间的空间。

我刚开始使用 HTML 和 CSS，因此非常感谢您提供任何帮助！

编辑：添加 CSS 代码

Answer 1

有一些 HTML 和 CSS 更改。请使用以下代码。

HTML 代码：

<nav>
    <div class="nav_my_main">


        <div class="navbar-main-wrapper">

            <ul class="navbar-left-wrapper">
                <li><a href="/" >Home</a></li>
                <li><a href="profile" >My Account</a></li>
                <li><a href="contact" >Contact</a></li>
            </ul>

            <ul class="navbar-right-wrapper">
                <li><a href="login" id="nav-sign-in">Sign In</a></li>
                <li><a href="register" id="nav-register">Register</a></li>
                <!--{{#if auth}}
                <script>
                    console.log(this)
                    var register = document.getElementById('nav-register');
                    register.style.visibility = 'hidden';
                    register.style.position = 'absolute';
                </script>
                {{/if}} -->
                <li><a href="logout" id="nav-logout" onclick="logoutConfirm()">Logout</a></li>
                <script>
                    function logoutConfirm() {
                        var r = confirm('Are you sure you want to log out?');
                        //if the user clicks "Cancel" on the pop-up, user doesn't logout
                        if (r !== true) {
                            event.preventDefault();
                        }
                    }
                </script>
                <li><a href="about">About</a></li>
            </ul>

            <!-- MIDDLE FILL -->
            <ul class="navbar-search-wrapper"> 
                <li>
                <form action="/search" id="searchform" method="GET">
                    <input type="search" name="search" placeholder="What are you looking for..." /> 
                    <button type="submit" form="searchform"><i class="fa fa-search"></i></button>
                </form>
                </li>
            </ul>
             </div>
        </div>
</nav> 

CSS 代码

/* ==== START NAVIGATION BAR ==== */

nav {
    margin-bottom: 30px;
}
nav .nav_my_main{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    /*overflow: hidden;*/
    background-color: #232f3e;   
    height: 47px;
    padding-bottom: 5px;
}

nav li {
    display: inline-block;
    padding-right: 2px;
    padding-left: 2px;
}

nav .navbar-left-wrapper {
    padding-left: 0;
    float: left;
    width: 300px;
}
nav .navbar-right-wrapper {
    float: right;
    padding-right: 0;
    width: 275px;
}

nav .navbar-main-wrapper {
    margin: 0 auto;
    max-width: 1460px;
    min-width: 1100px;
    margin: 0px;
    padding: 0px;
    background-color: #232f3e;
    height: 47px;
    padding-bottom: 5px;
    display: block;
    width: 100%;
}

nav li a {
    display: block;
    color: white;
    /*text-align: center;*/
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10%;
}

nav li a:hover:not(.active) {
    background-color: #485769; 
}

nav li a#nav-logout:hover:not(.active) {
    background-color: rgb(221, 34, 34);
}

nav a.active {
    background-color: #586a80;
}

/* ==============SEARCH BAR============== */
nav .navbar-search-wrapper li{
  width:100%;
}
nav input[type=search] {
    height: 40px;  
    font-size: 16px;
    background-color: none;
    padding: 10px 20px 10px 20px;
    /*-webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;*/

    /*center element using parent text-align:center and child display:inline-block; */ 
    display: inline-block;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border:none;
    margin: 4px 0px 4px 0px;
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    width: calc(100% - 36px);

}

nav input[type=search]:focus {
    outline: none;
}
nav .navbar-search-wrapper {
    display: inline-block;
    width: calc(100% - 615px);
    padding-left: 0;
    margin: 2px auto;
    /*border: 2px solid red;*/
}

nav .navbar-search-wrapper button {
    float: right;
    padding: 10px 10px;
    margin-top: 4px;

    background: #ffa807;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    height: 40px;
    width: 36px;
  }

nav .navbar-search-wrapper button:hover {
    background: #ff8808;
  }

/* ==============END SEARCH BAR============== */  

/* ==== END NAVIGATION BAR ==== */

Answer 2

也许你看起来像这样？

只需将所有内容包装在一个 ul 标记中，然后给出 ul display: flex，并为包装搜索表单的 li 放置百分比单位。

ul {
  list-style: none;
  background: dray;
  width: 100%;
  font-size: 0;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  font-size: 15px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.5);
  padding: 10px;
}

li.search-form {
  width: 100%;
  font-size: 0;
}

li.search-form input[type="search"] {
  width: 80%;
  font-size: 15px;
}

li.search-form input[type="submit"] {
  width: 20%;
}

<ul>
  <li>Home</li>
  <li>My Account</li>
  <li>Contact</li>
  <li class="search-form">
    <form>
      <input type="search">
      <input type="submit">
    </form>
  </li>
  <li>Sign In</li>
  <li>Register</li>
  <li>Logout</li>
  <li>About</li>
</ul>

Answer 3

请添加这个css

#searchform {
height: 40px;
padding: 0px 15px;
display: inline-block;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
margin: 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
position: relative;
border-radius: 5px;
overflow: hidden;
}

#searchform input[type=search] {
height: 38px;
border: 0;
}

nav .navbar-search-wrapper button {
float: right;
margin: auto;
background: #ffa807;
font-size: 17px;
border: none;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
top: 0;
text-align: center;
padding: 10px;
}

并删除它：

nav input[type=search] {
height: 40px;
font-size: 16px;
background-color: none;
padding: 10px 20px 10px 20px;
display: inline-block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
margin: 4px 0px 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
padding: 10px;
}