Forum Mjukvara Programmering och digitalt skapande Tråd

Bättre sätt att sätta upp mina navigerings element HTML/CSS

1
Skriv svar
Permalänk
Medlem
●

Bättre sätt att sätta upp mina navigerings element HTML/CSS

Så min navigerings bar ska ha 3 olika element av olika storlekar och jag använder flex som en container. Min kod just nu gör som jag vill att den ska göra men den kräver tre olika klasser som är i stort sätt identiska till varandra förutom namnet då jag måste individuellt sätta ett flex värde för att få dom i rätt och jämn storlek 15% på 4, 30% på 1 och 10% på 1. Om jag använder flex grow så kan jag bli av med .search-bar klassen genom att inkludera den i .nav-item men det leder till att elementen med flex-grow 2 inte är lika breda.

Finns det något sätt att reducera antalet klasser?

C

.navcontainer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  font-size: larger;
  background-color: aliceblue;
  margin-bottom: 20px;
}

.nav-item {
  flex: 15%;
  display: flex;
}

.nav-item a {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
}

.nav-item a:hover {
  background-color: black;
  color: white;
}

.nav-item a.active {
  background-color: black;
  color: white;
}

.cash-cart {
  flex: 10%;
  display: flex;
  height: 62px;
  justify-content: center;
}

.cash-cart img {
  height: 70%;
  max-height: 40px;
}

.cash-cart a {
  width: 100%;
  align-self: center;
  max-height: 62px;
}

.search-bar {
  flex: 30%;
  display: flex;
}

.search-bar a {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
}

.search-bar input {
  width: 90%;
  height: 30%;
  margin-inline: 5% 5%;
  padding: 5px 0px;
  flex: 30%;
}
}
 <nav class="navcontainer">
      <div class="nav-item"><a href="#" class="active">Startsida</a></div>
      <div class="nav-item"><a href="#">Produkter</a></div>
      <div class="nav-item"><a href="omoss.html">Om oss</a></div>
      <div class="search-bar">
        <input
          type="text"
          name="searchbar"
          id="navsearchbar"
          placeholder="Sök..."
        />
      </div>
      <div class="nav-item"><a href="#">Logga in</a></div>
      <div class="cash-cart">
        <a href="#"><img   
          src="ikoner/kassavagn ikon_1.png" alt="produkt vagn" /></a>
      </div>
Visa signatur

Så jag kommer ihåg. [code][/code]

Redigera
Citera flera Citera
1
Skriv svar