<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Centred Widthless floats</title>
</head>
<style>
.navcentre {text-align:center;margin:10px auto;display:table;border:1px solid #000;padding: 2px;}
.navcentre ul { list-style:none;margin:0;padding:0;display:inline-block;white-space:nowrap;}
.navcentre ul li{display:inline-block }
.navcentre ul a{display:inline-block;padding: 6px 15px;text-decoration:none;background: #00e0c3;border: 1px solid #000000;color: #fff;font-size: 14px;font-family: verdana;}
.navcentre ul a:hover{background:red;color:#fff}
</style>
<body>
<div class="navcentre">
<ul>
<li><a href="#">Demo Text 1</a></li>
<li><a href="#">Demo Text 2</a></li>
<li><a href="#">Demo Text 3</a></li>
</ul>
</div>
</body>
</html>
Here is a example..
<html>
<head>
<meta charset="utf-8">
<title>Centred Widthless floats</title>
</head>
<style>
.navcentre {text-align:center;margin:10px auto;display:table;border:1px solid #000;padding: 2px;}
.navcentre ul { list-style:none;margin:0;padding:0;display:inline-block;white-space:nowrap;}
.navcentre ul li{display:inline-block }
.navcentre ul a{display:inline-block;padding: 6px 15px;text-decoration:none;background: #00e0c3;border: 1px solid #000000;color: #fff;font-size: 14px;font-family: verdana;}
.navcentre ul a:hover{background:red;color:#fff}
</style>
<body>
<div class="navcentre">
<ul>
<li><a href="#">Demo Text 1</a></li>
<li><a href="#">Demo Text 2</a></li>
<li><a href="#">Demo Text 3</a></li>
</ul>
</div>
</body>
</html>
Here is a example..
No comments :
Post a Comment