CSS導航條的問題

所以我有這個問題，我試圖做一個簡單的導航欄，其中李CSS導航條的問題

body { 
     margin: 0px; 
     font-family: Tahoma; 
     font-size: 12pt; 
    } 
    a { 
     color: #3D91EB; 
     text-decoration:none 
    } 
    a:link { 
     color: #3D91EB; 
    } 
    a:visited { 
     color: #3D91EB; 
    } 
    a:active { 
     color: #2C82DE; 
    } 
    .navigation { 
     height: 30px; 
     background-color: #383838; 
     color: whiteSmoke; 
     list-style-type:none; 
     padding: 5px; 
    } 
    .navigation ul { 
     text-align: center; 
     width: 100%; 
     list-style-type: none; 
    } 
    li { 
     display: inline; 
    } 
    .container { 
     margin-top: 20px; 
     margin-left: auto; 
     margin-right: auto; 
     background-color: #9C9C9C; 
     height: 500px; 
     width: 600px; 
     padding: 10px; 
    }

，這裏是我的HTML

<div class="navigation"> 
      <ul> 
       <li>Test 1</li> 
       <li>Test 2</li> 
       <li>Test 3</li> 
      </ul> 
</div> 
<div class="container" style=""> 
     Testasdf 
</div>

如果任何人都可以請幫助我解決了我的問題，那太棒了！

來源

2013-12-18 user3024106

你的問題似乎是不完整 –

那麼你的問題是什麼問題。你從來沒有說過這個問題是什麼？ – MElliott

一旦給出答案，請不要編輯原始問題，謝謝。 – thomaux

檢查這一項： -

FIDDLE

更新如下： -

.navigation ul { 
    text-align: center; 
    width: 100%; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
}

來源

2013-12-18 06:22:50 Anup

檢查編輯的答案。更新班級。 – Anup

你是一個拯救生命的人，我非常感激！謝謝！ – user3024106

是啊，那是因爲無序列表自動擁有CSS填充和利潤他們。你必須先清除它們：

ul { 
    margin: 0px; 
    padding: 0px; 
}

來源

2013-12-18 06:31:25 PMG

CSS導航條的問題

回答

相關問題