Javascript 基础5的动态输入箱宽度我刚刚开始创建基金会，尝试用搜索框创建标题栏。我希望搜索框填充标题栏中的所有可用空间。但是，我尝试过的任何方法都不奏效：_Javascript_Html_Css_Zurb Foundation

Javascript 基础5的动态输入箱宽度我刚刚开始创建基金会，尝试用搜索框创建标题栏。我希望搜索框填充标题栏中的所有可用空间。但是，我尝试过的任何方法都不奏效：

javascript html css zurb-foundation

Javascript 基础5的动态输入箱宽度我刚刚开始创建基金会，尝试用搜索框创建标题栏。我希望搜索框填充标题栏中的所有可用空间。但是，我尝试过的任何方法都不奏效：,javascript,html,css,zurb-foundation,Javascript,Html,Css,Zurb Foundation,1）我尝试设置50%的宽度，但在小屏幕尺寸时，它会将其他按钮从最上面一行上推下 2）我试图实现此解决方案，但无法使其正常工作（请参见注释css）我在这里设置了一个JSFIDLE：谢谢你的帮助 <!doctype html>  <html lang="en"> <head> <met

1）我尝试设置50%的宽度，但在小屏幕尺寸时，它会将其他按钮从最上面一行上推下

2）我试图实现此解决方案，但无法使其正常工作（请参见注释css）

我在这里设置了一个JSFIDLE：

谢谢你的帮助

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Site</title>


    <meta name="description" content="Desc." />

    <link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" />
    <script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    <style type="text/css">

        .row { max-width: 1200px; }

/*      .searchParent div { overflow: hidden; }
        .searchText { width: 100%;  }
        .searchButton { float: right; }
*/
    </style>

</head>
<body>

    <!-- Navigation -->

    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <!-- Title Area -->
            <li class="name">
                <h1>
                    <a href="#">
                        My Site
                    </a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <form>
                <ul class="left">
                    <li class="has-form"> 
                        <div class="row collapse searchParent"> 
                            <div class="large-8 small-9 columns searchText"> 
                                <input type="text" placeholder="Find Stuff"> 
                            </div> 
                            <div class="large-4 small-3 columns searchButton"> 
                                <a href="#" class="button expand">Search</a> 
                            </div> 
                        </div> 
                    </li>
                </ul>
            </form>

            <ul class="right">
                <li class="divider"></li>
                <li><a href="#">Login</a></li>
                <li class="divider"></li>
                <li><a href="#">Register</a></li>
                <li class="divider"></li>
            </ul>
        </section>
    </nav>

    <!-- End Top Bar -->

    <div class="row">
        <div class="large-12 columns">

            <div class="row">



            </div><!-- End Thumbnails -->

        </div>
    </div>

<!-- End Content -->


<!-- Footer -->

<footer class="row">
    <div class="large-12 columns"><hr>
        <div class="row">

            <div class="large-6 columns">
                <p>&copy; Copyright no one at all. Go to town.</p>
            </div>

            <div class="large-6 small-12 columns">
                <ul class="inline-list right">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>

        </div>
    </div>
</footer>

    <!-- End Footer -->


<script>
    document.write('<script src=js/vendor/' +
        ('__proto__' in {} ? 'zepto' : 'jquery') +
        '.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
<!-- End Footer -->
<script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
<script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
</body>
</html>


我的网站
.行{最大宽度：1200px；}
/*.searchParent div{溢出：隐藏；}
.searchText{宽度：100%；}
.searchButton{float:right；}
*/

















&抄袭；版权谁也没有。进城去






文件。写入（“”）
$（document.foundation（）；

您应该查看和的基础文档，它们很容易理解，并给出了一些示例，这些示例几乎完全符合您的意图

你不应该真的需要写任何css，这就是基础

我建议这样做：

<nav class="top-bar" data-topbar=""> 

   <!-- Title -->
   <ul class="title-area">

    <!-- Mobile Menu Toggle -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
   </ul>

   <!-- Top Bar Section -->

   <div class="row">
      <div class="large-12 columns">
        <div class="row collapse">
          <div class="small-10 columns">
           <input type="text" placeholder="Search">
          </div>
        <div class="small-2 columns"> <a href="#" class="button postfix">Go</a> </div>
      </div>
    </div>
  </div>
  </nav>

我没能做到这一点，把一行放在顶栏似乎打破了一切-或者我在这里整理了一下小提琴：它给了你一个很好的位置开始定位（如果你使用这个，一定要删除内联css）。

<nav class="top-bar" data-topbar="">
  <ul class="title-area" style="width: 100%">
    <li class="name has-form">
        <div class="large-12 medium-12 small-11 columns"> 
            <input type="text" placeholder="Find Stuff"> 
        </div>      
    </li>
    <li class="toggle-topbar menu-icon"><a href=""><span></span></a></li>
  </ul>
</nav>