Question

我刚开始使用Foundation并尝试使用搜索框创建标题栏。我希望搜索框填充标题栏中的所有可用空间。但是，我所尝试的一切都没有用到：

1）我尝试设置50％的宽度但是在小屏幕尺寸下它将其他按钮推到顶行

2）我尝试实现此解决方案，但无法使其正常工作（请参阅注释的css） Dynamic width for input text box (HTML)

我在这里设置了一个jsfiddle： http://jsfiddle.net/B7nS8/1/

感谢您的帮助！

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

Answer 1

您应该查看topbar.js和form inputs的基础文档，它们很容易理解，并提供了几乎完全符合您要做的示例。

你真的不需要写任何基础，这是什么基金会。

我建议这样的事情：

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

确保您还记得在topbar.js

之后添加对foundation.min.js的引用

编辑：添加了替代方法

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

基础5中的动态输入框宽度

1 个答案: