Bill, thanks for your reply. In your suggestion, it appears to me that if you
don't float the li, all links will stack up in the center of the container.
Here's the css and html that I'm using:
#container {
text-align: center;
}
ul#nav {
list-style-type: none;
font-size: 1.2em;
}
ul#nav li {
display: inline;
margin-left: 5px;/* to space the tabs */
float: left;
width: 7em;
}
ul#nav li a:link, ul#nav li a:visited {
text-decoration: none;
display: block;
word-wrap: break-word;/* IE only for that long link name */
padding: 10px;
width: 7em;
}
ul#nav li a:hover {
}
<div id="container">
<ul id="nav">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div>
--- On Thu, 4/2/09, Bill Brown <[email protected]> wrote:
From: Bill Brown <[email protected]>
Subject: Re: [css-d] center float:left
Something like this?
~~~ [CSS]
<style type='text/css'>
ul.tabs,ul.tabs li{list-style:none;margin:0;padding:0;}
ul.tabs {
text-align: center;
}
ul.tabs li {
display: inline-block;
vertical-align: bottom;
}
ul.tabs a {
display: block;
overflow: hidden;
padding: 2px 5px;
white-space: nowrap;
width: 100px;
}
</style>
<!--[if lt IE 7]><style type='text/css'>
ul.tabs li {display: inline;}
</style><![endif]-->
~~~ [/CSS]
~~~ [HTML]
<ul class='tabs'
><li><a href='/'>Home</a></li
><li><a href='/'>About Us</a></li
><li><a href='/'>Contact Us is a really long link</a></li
></ul>
~~~ [/HTML]
Hope it helps.
--Bill
--
<!--
! Bill Brown <[email protected]>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
