• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak stworzyć listę o elementach równej wielkosci w navbarze.

Object Storage Arubacloud
+1 głos
373 wizyt
pytanie zadane 21 marca 2023 w HTML i CSS przez tonn204 Mądrala (7,440 p.)

Witam mam taki kod jak poniżej i chce żeby niezależnie od tego co jest wpisane w elementy listy prostokąty miały zawsze taką samą wielkość jak to zrobić używając flexboxa? Prówałem ustawić flex: 1 1 0; ale to nic nie zmienia. Zmieniałem też flex-basis na 0 ale nadal nic. Robiłem to zarówno dla elmentu ul i li. Co jest nie tak? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Navbar</title>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <h3>LOGO</h3>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">CONTRIBUTE</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    color: black;
}

.container{
    width: 100%;
    height: 100vh;
}

.navbar{
    width: 80%;
    margin: auto;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: bisque;
}

.navbar ul{
    display: flex;
}

.navbar  li{
    flex-basis: 100%;
    list-style: none;
    padding: 1rem;
    margin: 10px;
    text-align: center;
    border: 2px dashed black;
}

.navbar a{
    text-decoration: none;
    text-align: center;
    color: black;
}

 

1 odpowiedź

0 głosów
odpowiedź 21 marca 2023 przez VBService Ekspert (254,570 p.)
wybrane 21 marca 2023 przez tonn204
 
Najlepsza

Możesz np. użyć zapisu

.navbar ul {
  display: table;
  table-layout: fixed;
  ...
}

.navbar li {
  display: table-cell;
  ...
}

 

Twój kod zmodyfikowany nieco

[ on-line ]

.navbar ul {
  /* display: flex; */
  display: table;
  width: 70%;
  table-layout: fixed;
  border-spacing: 10px; /* margin: 10px; */
}

.navbar li {
  /* flex-basis: 100%; */
  display: table-cell;
  list-style: none;
  padding: 1rem;
  /* margin: 10px; */
  text-align: center;
  border: 2px dashed black;
  overflow: hidden;
}

 

komentarz 21 marca 2023 przez tonn204 Mądrala (7,440 p.)
Działa, dziękuję za pomoc!
komentarz 21 marca 2023 przez VBService Ekspert (254,570 p.)
edycja 22 marca 2023 przez VBService

Jak ciekawostkę sprawdź:

z użyciem clamp

[ on-line ]

.navbar li{
  font-size: clamp(0.5rem, 1.25vw, 1.5rem);
  display: table-cell;
  list-style: none;
  padding: clamp(0.25rem, 1.25vw, 1.5rem);
  text-align: center;
  border: 2px dashed black;
  overflow: hidden;
}

 

z użyciem: css variables i js

[ on-line ]

.navbar li{
  --padding: 1rem;
  list-style: none;
  padding: var(--padding);
  margin-left: 10px;
  text-align: center;
  border: 2px dashed black;
  width: calc(var(--navbar-li-width) - var(--padding));
}

 

Podobne pytania

0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 22 grudnia 2017 w HTML i CSS przez rycho84 Nowicjusz (230 p.)
0 głosów
1 odpowiedź 491 wizyt
pytanie zadane 30 kwietnia 2022 w HTML i CSS przez kolusnk Początkujący (310 p.)
0 głosów
1 odpowiedź 255 wizyt
pytanie zadane 22 grudnia 2016 w PHP przez ThePatrykOOO Dyskutant (8,400 p.)

92,690 zapytań

141,603 odpowiedzi

320,098 komentarzy

62,050 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...