Jak mogę umieścić zarówno moje pole wyszukiwania, jak i plakietkę poziomo w jednym wierszu na pasku nawigacyjnym? Używam 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>
                <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>
1
TajC 12 marzec 2020, 06:12

2 odpowiedzi

Najlepsza odpowiedź

Jeśli prześlesz swój problem do CodePen, łatwiej będzie wypróbować Twój kod, dostosować go i pomóc Ci. Nie trwało to długo, dodałem Twoje rzeczy w około 5 minut, dbając o skrypty i linki, ale będzie to świetna pomoc dla osób, które chcą pomóc Ci rozwiązać Twój problem.

A więc kilka ogólnych rzeczy o siatce materializacji:

  • Aby wstawić pola tekstowe w tekście, musisz dodać klasę inline do input-field - div (można znaleźć w przykładach Materializacja danych tekstowych). Dodanie otaczającego elementu div nie działa
  • Kolumny działają tylko z otaczającym wierszem, którego nie ma <form>. To także część twojego problemu, bardziej szczegółowo poniżej
  • Siatka oparta jest na 12 słupach. Więc formularz z col s12 zajmie cały wiersz
  • Jeśli chcesz podzielić formularz 50:50, musisz umieścić formularz w osobnym pojemniku. Jeśli nie, kolumna założy, że odwołuje się do kontenera wokół całego paska nawigacyjnego (więcej o Grids in Materialize
  • Lista nieuporządkowana (ul - tagi) powinna zawsze zawierać elementy listy (li - tagi) dla każdej części nieuporządkowanej listy

A zatem, jeśli chodzi o twój problem: dodaj elementy listy do swojej nieuporządkowanej listy, jedną dla plakietki, jedną dla formularza wyszukiwania. Następnie musisz również dodać element div z klasą row - do swojego formularza, a także kontener, w którym elementy wrócą do lokalnego kontekstu. Dodaj klasę inline - do odpowiedniego elementu i gotowe. Oto CodePen z działającym przykładem. Mam nadzieję, że to pomoże i rozumiesz, dlaczego wcześniej to nie działało!

Edytuj: zaktualizuj link do kodowania

0
Melvin Witte 21 marzec 2020, 01:16

Spróbuj w ten sposób

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

Dodaj klasę wierszy zamiast inline

0
bajran 12 marzec 2020, 03:17