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 <macnim...@gmail.com> wrote:
From: Bill Brown <macnim...@gmail.com>
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 <macnim...@gmail.com>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
