Встроенная панель поиска материализуется CSS

Question

Как разместить окно поиска и значок горизонтально в одной строке на панели навигации? Я использую материализовать 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>

Answer 1

Если вы загрузите свою проблему в CodePen , людям будет проще опробовать ваш код, адаптировать его и помочь вам. Это не займет много времени, я добавил ваши материалы за 5 минут, позаботившись о скриптах и ​​ссылках, но это будет отличной помощью для людей, которые хотят помочь вам решить вашу проблему.

Итак, некоторые общие сведения о сетке материализации:

• Чтобы сделать текстовые поля встроенными, вам необходимо добавить класс inline к input-field -div (можно найти в примерах Материализация текстовых входов ). Добавление включающего div не работает
• Столбцы работают только с включающей строкой, которой нет у <form>. Это тоже часть вашей проблемы, более подробно ниже
• Сетка основана на 12 столбцах. Таким образом, форма с col s12 займет всю строку
• Если вы хотите разделить форму 50:50, вам нужно поместить форму в свой собственный контейнер. Если нет, столбец будет предполагать, что он ссылается на контейнер вокруг всей панели навигации (подробнее о Сетки в Materialize
• Неупорядоченный список (ul -tags) всегда должен иметь список -items (li -tags) для каждой отдельной части неупорядоченного списка

Итак, что касается вашей проблемы: добавьте элементы списка в неупорядоченный список, один для значка, один для формы поиска Затем вам также нужно добавить div с классом row к вашей форме, а также контейнер для элементов, чтобы вернуться в локальный контекст. Добавьте класс inline к нужному элементу, и Вы хороши для go. Вот CodePen с рабочим примером . Надеюсь, это поможет, и вы поймете, почему он не работал раньше!

edit: обновить ссылку codepen

Answer 2

Попробуйте таким способом

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

Добавить класс строк вместо inline