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>
2 odpowiedzi
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ę
inlinedoinput-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 s12zajmie 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
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
Podobne pytania
Nowe pytania
css
CSS (Cascading Style Sheets) to język arkuszy stylów reprezentacji używany do opisywania wyglądu i formatowania dokumentów HTML (HyperText Markup Language), XML (Extensible Markup Language) i elementów SVG, w tym (ale nie tylko) kolorów, układu, czcionek, i animacje. Opisuje także, jak elementy powinny być renderowane na ekranie, na papierze, w mowie lub na innych mediach.