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

pytanie zadane 21 marca 2023 w HTML i CSS przez tonn204 Mądrala (7,470 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ź

odpowiedź 21 marca 2023 przez VBService Ekspert (256,600 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,470 p.)

Działa, dziękuję za pomoc!

komentarz 21 marca 2023 przez VBService Ekspert (256,600 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));
}