Links op 1 regel met css.

Niet echt een probleem:

Waarschijnlijk is dit al door een miljoen mensen op een miljoen betere manieren gedaan. Het naast elkaar zetten van hyperlinks in een webpagina. Toch hier nog een manier.

Toch maar een oplossing:

De truuk is om de <p id="navbar"> als table weer te geven en de  links daarbinnen weer te geven als een tablecell en de tekst binnen de cell te centreren.

De HTML:


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p id="navbar">
<a href="/?page=index">home</a>
<a href="/?page=php">php</a>
<a href="#">contact</a>
<a href="#">code</a>
<a href="#">login</a>
</p>
<div id="content"></div>
<div id="footer">&copy; wasietsmet.nl</div>
</body>
</html>

De CSS:


body {
 margin:0;
 background:grey;
}
a {
 text-decoration:none;
 color:yellow;
}
#sitetitle {
 font-size:2em;
 margin:0;
 text-align:center;
 background:grey;
}
#navbar {
 text-align:justify;
 width:100%;
 display:table;
 background:grey;
 margin:0;
}
#navbar a {
 display: table-cell;
 text-align:center;
}
.center {
 text-align:center;
}
#content {
 min-height:400px;
 padding:1em;
}
#footer {
 text-align:center;
}