水平定位一個無序列表

我有一個無序列表，用作基本導航欄。水平定位一個無序列表

我的目標是以60％的屏幕寬度顯示並居中顯示。我遇到的問題是它顯示一個偏離中心，大小也有所不同。我使用外部樣式表。任何幫助都感激不盡。

這裏是頁：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Help</title> 
     <link rel="stylesheet" type="text/css" href="Styles/mainStyle.css"/> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <h2>Home</h2> 
     <ul> 
      <li><a href="link.htm">Home</a></li> 
      <li><a href="link2.htm">Link2</a></li> 
      <li><a href="link3.htm">Link3</a></li> 
     </ul> 
     <div id="container"> 
      <p> 
       Some Text. Some Text. Some Text. Some Text. Some Text. 
      </p> 
      <p> 
       More Text. More Text. More Text. More Text. More Text. 
      </p> 
     </div><!-- End of container --> 
    </body> 
</html>

這裏是外部樣式表：

h2 
{ 
    /* Positioning */ 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    /* Colours */ 
    background-color: #99CCCC; 
    /* Border */ 
    border: 1px solid #000000; 
    border-radius: 25px; 
} 
ul 
{ 
    /* Positioning */ 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
li 
{ 
    /* Positioning */ 
    padding-left: 5px; 
    padding-right: 5px; 
    display: inline-block; 
    vertical-align: top; 
    /* Colours */ 
    background-color: #99DDBB; 
    /* Border */ 
    border: 1px solid #000000; 
    border-radius: 25px; 
} 
a 
{ 
    /* Colours */ 
    color: #000000; 
} 
a:hover 
{ 
    font-style: italic; 
} 
#container 
{ 
    /* Positioning */ 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
p 
{ 
    /* Positioning */ 
    padding: 10px; 
    text-align: left; 
    /* Colours */ 
    background-color: #99CCCC; 
    /* Border */ 
    border: 1px solid #000000; 
    border-radius: 25px; 
} 
img 
{ 
    /* Positioning */ 
    width: 50%; 
    border: 1px solid #000000; 
    border-radius: 25px; 
}

來源

2011-12-02 Delta_Cmdr

你給我工作得很好的代碼。也許還有別的東西你沒有在CSS中顯示我們？編輯：這裏是一個小提琴，指出你想要改變：http://jsfiddle.net/tV5R5/ – varatis

你在Chrome瀏覽器中看過它，它是它正在播放的瀏覽器。 –

是的，這就是我用過的。怎麼了？ – varatis

重置UL標籤的填充。把它放在你的css的開頭：ul {padding：0; }

如果你想完全重置你的CSS，請訪問：Reset CSS

來源

2011-12-02 16:34:40

如果要重置，最好使用已經存在的reset.css表單之一，它們已經過測試，以便它們消除所有默認樣式。 – bigblind

非常感謝你，我不知道reset.css甚至存在。 –

水平定位一個無序列表

回答

相關問題