I need to display a list of URLs in a single row within a ul element. I attempted to center them on the page using this method, but they ended up slightly off-center.
Here's the HTML code:
<ul id="links">
<li class="inner-li"><a href="about">about</a></li>
<li class="inner-li"><a href="http://ahmadalli.net/projects">projects</a></li>
<li class="inner-li"><a href="http://photo.ahmadalli.net">photoblog</a></li>
<li class="inner-li"><a href="music">music</a></li>
</ul>This is the CSS style that I applied:
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em;
list-style-type: none;
}
@media screen and (min-width: 21em) {
#links {
width: 21em;
margin: 0 auto;
}
}You can view this layout on JsFiddle.