Spacing Out Navigation Links

HTML & CSS
1

Hi,

I’d like to space out my navigation links.

                                       <li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>
						<li><a href="page.php">Text</a></li>


#navigation {
	list-style-position: inside;
	list-style-type: none;
	

}

#navigation li{
	display: inline-block;
	text-align:center;

}

At the moment the text is very squashed together. How would I edit the font size to make it larger in CSS3?

I’d also like to make the text align justified so that it matches where the header banner begins and end (not in the centre).

Thank you.

—edit—

Fixed my problem by padding it out. However, still can’t increase font-size: [size]px;

and it’s not justifying still.

2

Hi,

We’d need to see the full css to know why the font-size isn’t being applied. Normally you would just say #navigation li a{font-size:120%} etc.

If you are supporting only ie8+ then you can space the menu items out easily using the display table properties. Here’s an example.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul#nav {
	width:60%;
	display:table;
	border:1px solid red;
	margin:0 auto;
	padding:0;
	list-style:none;
	background:#000;/*table-layout:fixed; use if you want them all the same width*/
}
#nav li {
	display:table-cell;
	border-left:1px solid red;
	text-align:center;
}
#nav li:first-child { border:none; }
#nav a {
	display:block;
	color:#fff;
	text-decoration:none;
	line-height:1.5;
	font-size:140%;
}
#nav a:visited { color:#fff }
#nav a:hover {
	background:#ccc;
	color:#000;
}
</style>
</head>

<body>
<ul id="nav">
		<li><a href="page.php">Text text</a></li>
		<li><a href="page.php">Text</a></li>
		<li><a href="page.php">Text</a></li>
		<li><a href="page.php">Text text</a></li>
		<li><a href="page.php">Text</a></li>
		<li><a href="page.php">Text</a></li>
		<li><a href="page.php">Text</a></li>
		<li><a href="page.php">Text</a></li>
</ul>
</body>
</html>