nicht angemeldet
@@franzsen
Manchmal ist es wie verhext. In diesem Beispiel funktioniert
justify-content: space-araound
tadellos.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
width:90%;
height:300px;
background:#fff;
display: flex;
justify-content: space-around;
outline: 2px solid;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
#box1 {
background:red;
width:20%;
}
#box2 {
background:yellow;
width:20%;
}
#box3 {
background:green;
width:20%;
}
#box4 {
background:blue;
width:20%;
}
ul {
display: flex;
justify-content: space-around;
list-style: none;
}
li {
outline: 2px solid;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
<li>Liste 3</li>
<li>Liste 4</li>
</ul>
</nav>
<div id="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4</div>
</div>
</body>
</html>
In diesem Beispiel bringe ich es nicht zuwege:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
ul {
width: 900px;
height: 70px;
background-color: white;
display: flex;
justify-content: space-around;
list-style: none;
margin-top: 10px;
align-items: center;
margin-left: auto;
margin-right: auto;
outline: 2px solid;
}
li {
background-color: red;
width: 200px;
height: 80%;
flex-item: flex-start;
font-size: 15px;
margin: auto;
outline: 2px solid;
}
ul a {
display:block;
text-decoration: none;
padding-top: auto;
padding-bottom: auto;
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>
Ursprünglich war dieser Navigator mit einer Tabelle formatiert. In der neuen Webseite möchte ich das mit "flex" gestalten.
--
LG Franz
LG Franz
Der Martin
Gunnar Bittersmann
Matthias Apsel
Auge