CSS set width on items in centered horizontal list
I have a horizontal list which I'm using as a paging control.
I have two additional requirements - I need to specifiy the width of some of the items, and I need to be able to center the list in the page. I can do one or the other, but I can't work out how to achieve both.
See the below as an example/starting point:
<ul>
<li class="previous"><a>previous</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li class="next"><a>next</a></li>
</ul>
li
{
display: inline;
list-style-type: none;
margin: 5px;
}
a
{
padding: 2px 开发者_C百科10px 2px 10px;
border: solid 1px #aaa;
color: #131313;
text-decoration: none;
}
jsFiddle here.
I would like the previous
and next
items to be the same width, and I would like the whole thing centered in the page. Note that I can't know the width of the complete list, so using a container with margin: 0 auto;
isn't going to work afaik.
Must be cross-browser and support IE6.
See: http://jsbin.com/azoquv
text-align: center
onul
centers the whole thing.display: inline-block
and the hack for IE6/7 allows you to set your ownwidth
onli
.
Tested in IE6/7 + Chrome. It will just work in all modern browsers.
ul {
text-align: center;
margin: 0;
padding: 0
}
li
{
display: inline-block;
*display: inline;
zoom: 1;
list-style-type: none;
margin: 5px;
}
a
{
display: block;
padding: 2px 10px 2px 10px;
border: solid 1px #aaa;
color: #131313;
text-decoration: none;
}
精彩评论