列表顯示略偏離中心

我似乎無法弄清楚爲什麼我的列表顯示略偏離中心。我在它下面有一些文本在100％居中的同一個容器中，但列表似乎從左側略微填充。我是CSS的新手，所以也許有人可以指出我出錯的地方。非常感激！列表顯示略偏離中心

下面是HTML

<div id="footer_menu"> 
<ul id="navlist"> 
<li><a href="#">HOME</a></li> 
<li>|</li> 
<li><a href="#">ABOUT</a></li> 
<li>|</li> 
<li><a href="#">ARCHIVE</a></li> 
<li>|</li> 
<li><a href="#">GET INVOLVED</a></li> 
<li>|</li> 
<li><a href="#">BLOG</a></li> 
<li>|</li> 
<li><a href="#">CONTACT</a></li> 
</ul> 
<font style="font-family:Arial, Helvetica, sans-serif; font-size:10px">ALL CONTENT PRODUCED BY <img src="images/dblzerofilms.jpg" width="190" height="13" /> COPYRIGHT 2011</font> 
</div>

這裏是CSS

#footer_menu{ 
    position: relative; 
    height: 75px; 
    width: 1023px; 
    bottom: 150px; 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
    font-family: Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    color: #000; 
} 
#footer { 
    height:75px; 
    width:1024px; 
    background-image: url(images/footer_img.jpg); 
    position: relative; 
    bottom: 0px; 
} 
#navlist li 
{ 
    display: inline; 
    list-style-type: none; 
    padding-right: 5px; 
    font-size: 11px; 
} 
#navlist li a 
{ 
    font-family: Arial, Helvetica, sans-serif; 
    color: #000; 
    text-decoration: none; 
    font-weight: lighter; 
    font-size: 11px; 
}

來源

2011-12-24 Greg

語義上說，我通常喜歡用文本的'轉換：大寫「，而不是將所有文本都放在HTML中。 – Wex 2011-12-24 03:53:46

此外，包含多個單詞的CSS類通常使用連字符連接，而不是下劃線。 – Wex 2011-12-24 03:54:18

嘗試#navlist {width：1024px;保證金：0汽車; } – 2011-12-24 03:55:38

我不是把我的墊片元素<li>裏面的一個巨大的風扇。通常，如果我需要做你想做的事情，我使用<p>標籤。請參閱我下面的代碼：

HTML：

<div id="footer-menu"> 
    <p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Archive</a> | <a href="#">Get Involved</a> | Blog | <a href="#">Contact</a></p> 
    <p>All content produced by <img src="images/dblzerofilms.jpg" width="190" height="13" /> Copyright 2011</p> 
</div>

CSS：

#footer-menu { 
    font: 11px/1 Arial, Helvetica, sans-serif; 
    text-align: center; 
    text-transform: uppercase; 
    color: #000; } 
#footer-menu a { 
    text-decoration: none; 
    color: #000; 
    margin: 0 5px; 
    display: inline-block; }

前瞻：http://jsfiddle.net/Wexcode/Lb9XC/

來源

2011-12-24 04:05:52 Wex

所有你需要做的是以下行添加到您的CSS規則：

#navlist {padding:0}

，這將刪除你有的額外的左填充。我試着用速記CSS線（即保證金和字體），希望幫助解決你的CSS代碼一點點：

#footer_menu{ 
    height:75px; 
    margin:0 auto; 
    text-align:center; 
    font-family:Arial, Helvetica, sans-serif; 
    text-decoration:none; 
    color:#000; 
} 
#footer { 
    height:75px; 
    width:1024px; 
    background-image: url('images/footer_img.jpg'); 
} 
#navlist {padding:0} 
#navlist li { 
    display:inline; 
    list-style-type:none; 
    padding-right:5px; 
    font-size:11px; 
} 
#navlist li a { 
    font:lighter 11px Arial, Helvetica, sans-serif; 
    color:#000; 
    text-decoration:none; 
}

來源

2011-12-24 05:32:08

這是最接近的。這與向ul＃navlist添加0填充和0邊界一樣簡單 – Greg 2011-12-24 15:17:16

添加這種風格

#navlist 
{ 
    clear: left; 
    padding: 0; 
}

來源

2011-12-24 06:00:39

列表顯示略偏離中心

回答

相關問題