Depot43-Unterlagen - Flex Navigation (horizontal)

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Flex Navigation (horizontal)</title>
	<style>
		ul {
			display:flex;
		}
		li {
			width:30%;
			justify-content:space-between;
			border:1px solid black;
			margin: 12px;
			list-style-type:none;
		}
		a{
			background: #efefef;
			display:block;
			padding:6px;
			text-decoration: none;
			color: black;
			text-align:center;
		}
		a:hover {
			color: red;
			background: white;
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="/unterlagen/flex/flex-layout/flex-navigation-horizontal#">Ein Listenelement - Eins</a></li>
		<li><a href="/unterlagen/flex/flex-layout/flex-navigation-horizontal#">Ein Listenelement - Zwei</a></li>
		<li><a href="/unterlagen/flex/flex-layout/flex-navigation-horizontal#">Ein Listenelement - das Dritte</a></li>
	</ul>
</body>
</html>


 

            

Hinweis

Für einen reaktionsfähigen (Responsiv) Aufbau einer Navigation, braucht es nur:

ul {
 display:flex;
 }
 li {
 width:30%;
 justify-content:space-between;
 }

Alle weiteren CSS-Deklarationen sind für die Gestaltung der Navigation.