Question

所以我遇到了这个问题，我正在尝试制作一个简单的导航栏，其中LI

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>

如果有人可以帮我解决问题，那就太棒了！

Answer 1

检查一下： -

FIDDLE

更新： -

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

Answer 2

是的，因为无序列表会自动拥有CSS填充和边距。你必须先清除它们：

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

CSS导航栏问题

2 个答案: