nicht angemeldet
Keine Breite der items (li) angegeben - items werde so breit wie ihr Inhalt - items haben genügend Platz sich horizontal zu verteilen
In diesem Fall geht es mir nicht um Textinhalt der die Größe der items bestimmt, sondern um gleichmäßige Verteilung bzw. einheitliche Darstellung.
items (li) haben eine Breite von jeweils 200px - macht bei 10 items 2000px - Breite des übergeordneten Containers 900px - items müssen schrumpfen und füllen den gesamten Container aus - flexbox funktioniert, items haben aber keinen Platz sich zu verteilen
Verflixt. Einfach und doch ...
Habe inzwischen das Problem bereinigt. Außerdem bin ich nun selber darauf gekommen (selber darauf gekommen - Eigenlob) warum justify-content: space around; nicht funktioniert. Ul hat ja eine Einrückung und daher konnte die Verteilung auf der linken Seite nicht berücksichtigt werden. Habe daher margin und padding auf null gesetzt.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
background-color: aqua;
}
ul {
margin: 0;
padding: 0;
width: 910px;
height: 70px;
background-color: white;
display: flex;
list-style: none;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-around;
outline: 2px solid;
}
li {
background-color: red;
width: 80px;
height: 80%;
font-size: 15px;
outline: 2px solid;
}
ul a {
display:block;
text-decoration: none;
font-size: larger;
text-align: center;
}
ul a:hover {
background-color: darken(deepskyblue, 5%);
}
</style>
</head>
<body>
<ul>
<li><a href="Allgemein.html">Allgemein</a></li>
<li><a href="Schwein.php">Schwein</a></li>
<li><a href="Rind.php">Rind</a></li>
<li><a href="Geflügel.php">Geflügel</a></li>
<li><a href="Ziege.php">Ziege</a></li>
<li><a href="Lamm.php">Lamm</a></li>
<li><a href="Kaninchen.php">Kaninchen</a></li>
<li><a href="Wild.php">Wild</a></li>
<li><a href="Fisch.php">Fisch</a></li>
<li><a href="Suppen.php">Suppen</a></li>
</ul>
</body>
</html>
Was ich noch nicht hinbekommen habe ist, den Text vertikal zu zentrieren.
Wieso funktioniert "hover" nicht?
LG Franz
Der Martin
Gunnar Bittersmann
Matthias Apsel
Auge