My text navigation bar keeps pulling to the left, can anyone tell me if my code is wrong somewhere? I've tried inline-block and removed float but it's still not working!
#navigation ul {
list-style: none;
padding: 0;
width:400px;
margin:auto;
display: inline-block;}
#navigation li {
margin: 1em 1em;
font-family: Times New Roman, Times, Calibri, GillSans, sans-serif;
font-style: italic;
display: inline-block;}
#navigation li a {
text-decoration: none;
display: inline-block;
}
#content {
width: 960px;
margin-top: 25px;
text-align:center;
}
#footer {
margin-top:30px;
text-align: center;
font-size: 0.9em;
}
#sub_navigation {
color: #BBB;
text-align:center;
margin-bottom: 25px;
height:55px;
letter-spacing:5px;
}
My HTML is:
<div id="navigation" class="span-24 last">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="editorial.html">Editorial</a></li>
<li><a href="portraits.html">Portraits</a></li>
Just remove the display:inline-block
property for ul
to center this : and for the items add text-align
#navigation ul {
list-style: none;
padding: 0;
width:400px;
margin:auto;
/*display: inline-block;*/ ---> Remove this
text-align: center; ----> Add this
}
The demo http://jsfiddle.net/aYVAP/2/
Delete display:inline-block in --->
#navigation li a {
text-decoration: none;
**display: inline-block;**
}
Paste: text-align:center;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.