内联搜索栏具体化CSS_Css_Materialize

内联搜索栏具体化CSS

css

内联搜索栏具体化CSS,css,materialize,Css,Materialize,如何在导航栏中将搜索框和徽章水平放置在一行中？我正在使用物化CSS <nav class="orange" role="navigation"> <div class="nav-wrapper container"> <a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a> <

如何在导航栏中将搜索框和徽章水平放置在一行中？我正在使用物化CSS

<nav class="orange" role="navigation">
            <div class="nav-wrapper container">
            <a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
                <ul class="right">
                    <a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
                    <form class="col s12">
                        <div class="inline">
                            <div class="input-field col s6">
                                <input id="search" type="text" class="validate" placeholder="Search...">
                            </div>
                            <div class="input-field col s6">
                                <button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
                            </div>
                        </div>
                    </form>
                </ul>
            </div>
        </nav>



搜寻

这样试试看

<nav class="orange" role="navigation">
            <div class="nav-wrapper container">
            <a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
                <ul class="right">
                    <a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
                    <form class="col s12">
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="search" type="text" class="validate" placeholder="Search...">
                            </div>
                            <div class="input-field col s6">
                                <button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
                            </div>
                        </div>
                    </form>
                </ul>
            </div>
        </nav>



搜寻

添加行类，而不是内联类

<nav class="orange" role="navigation"> <div class="nav-wrapper container"> <a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a> <ul class="right"> <a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a> <form class="col s12"> <div class="row"> <div class="input-field col s6"> <input id="search" type="text" class="validate" placeholder="Search..."> </div> <div class="input-field col s6"> <button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button> </div> </div> </form> </ul> </div> </nav>

搜寻

添加行类而不是内联类
如果您将问题上载到，人们可以更轻松地试用您的代码、调整代码并帮助您。这并不需要很长时间，我在大约5分钟内添加了您的内容，并负责脚本和链接，但这将对希望帮助您解决问题的人有很大帮助
关于物化网格的一些基本内容：

要使文本字段内联，您需要将
内联
类添加到
输入字段
-div（可以在的示例中找到）。添加封闭div无效

列仅适用于
中没有的封闭行。这也是你问题的一部分，下面将详细介绍

网格基于12列。因此，列为s12的表单将占据整行

如果要将表单拆分为50:50，则需要将表单放入它们自己的容器中。如果不是，col将假定它在整个导航栏周围引用容器（更多关于

无序列表（
ul
-tags）的每个单独部分应始终具有列表项（
li
-tags）

因此，关于您的问题：将列表项添加到无序列表中，一个用于徽章，一个用于搜索表单。然后，您还需要在表单中添加一个带有
行
-类的div，以及一个容器，以便将元素返回到本地上下文中。将
内联
-类添加到正确的元素中，您就可以开始了。他说这是一个。希望它能帮助你，你也明白为什么它以前不起作用

编辑：更新代码笔链接
如果你将你的问题上传到，人们可以更容易地试用你的代码、修改代码并帮助你。这并不需要很长时间，我在大约5分钟内添加了你的内容，并处理了脚本和链接，但这将对希望帮助你解决问题的人有很大帮助
关于物化网格的一些基本内容：

要使文本字段内联，您需要将
内联
类添加到
输入字段
-div（可以在的示例中找到）。添加封闭的div不起作用

列只对封闭行起作用，而
没有封闭行。这也是问题的一部分，下面将详细介绍

网格基于12列。因此，列为s12的表单将占据整行

如果要将表单拆分为50:50，则需要将表单放在它们自己的容器中。否则，col将假定它是围绕整个导航栏引用容器（更多关于

无序列表（
ul
-tags）的每个单独部分应始终具有列表项（
li
-tags）

因此，关于您的问题：将列表项添加到无序列表中，一个用于徽章，一个用于搜索表单。然后，您还需要在表单中添加一个带有
行
-类的div，以及一个容器，以便将元素返回到本地上下文中。将
内联
-类添加到正确的元素中，您就可以开始了。他说这是一个。希望它能帮助你，你也明白为什么它以前不起作用

编辑：更新代码笔链接
我试过了，没用。我开始觉得输入字段太大，所以按下按钮。我试过了，没用。我开始觉得输入字段太大，所以按下按钮